html

<div id="tovar"> <div class="cont"> <div id="name"> <a href="#"> Длинны текст, очень дилнный, которые не помещается в div name и я его переношу </div> <div id="kol" align="center"> </div> <div id="sum" align="center"> </div> <div id="del" align="center"> </div> </div>

css

 #name { text-decoration: none; width:50%; display:inline-block; height: 100%; border: solid 1px black; } #name а { white-space: initial; } #kol { white-space:nowrap; width:12%; display:inline-block; border: solid 1px red; height: 100px; } #sum { white-space:nowrap; width:23%; display:inline-block; } #del { white-space:nowrap; width:10%; display:inline-block; } .cont{ overflow:hidden; width:100%; } #name а { //перенос длинной ссылки white-space: initial; }

And the situation is as follows. If the word is not transferred in the name block, then the reference blocks remain in place and everything is fine, and if it is transferred, they go down. screen1

  • For these blocks, set the vertical-align: top - Dmitry Kulevich

1 answer 1

In blocks with display: inline-block; the default is vertical-align: baseline; ,

to change the alignment, specify vertical-align: top; or vertical-align: middle; (if you need to align in the middle).

 #name { text-decoration: none; width:50%; display:inline-block; vertical-align: top; height: 100%; border: solid 1px black; } #name а { white-space: initial; } #kol { white-space:nowrap; width:12%; display:inline-block; vertical-align: top; border: solid 1px red; height: 100px; } #sum { white-space:nowrap; width:23%; display:inline-block; vertical-align: top; } #del { white-space:nowrap; width:10%; display:inline-block; vertical-align: top; } .cont{ overflow:hidden; width:100%; } #name а { //перенос длинной ссылки white-space: initial; } 
 <div id="tovar"> <div class="cont"> <div id="name"> <a href="#"> Длинны текст, очень дилнный, которые не помещается в div name и я его переношу</a> </div> <div id="kol" align="center"> </div> <div id="sum" align="center"> </div> <div id="del" align="center"> </div> </div> </div>