Как выровнять Div по вертикали?

347

26 ноября 2016, 18:42

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;
}

И ситуация следующая. Если слово не переносится в блоке name, то справолежащие блоки остаются на месте и всё хорошо, а если переносится, то они едут вниз.

Answer 1

У блоков с display: inline-block; по-умолчанию vertical-align: baseline;,

чтобы изменить выравнивание, задайте vertical-align: top; или vertical-align: 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>