CSS три столбца фиксированной ширины и одинаковые высоты

Question

Я пытаюсь создать контейнер с тремя столбцами. Каждый столбец имеет фиксированную ширину, которую я указал. Каждый столбец должен охватывать всю высоту контейнера.

Проблема, с которой я столкнулась, заключается в том, что столбцы смещаются вверх/вниз в зависимости от содержимого столбцов. Проверьте http://jsfiddle.net/bhw44w7q/, чтобы посмотреть, что я имею в виду. Каков наилучший способ получить это право?

<div id="container"> 
    <div id="left">left left left left left</div> 
    <div id="middle">middle middle middle middle middle</div>  
    <div id="right">right right right right right</div> 
</div> 

#container { 
    height: 500px; 
    width: 750px; 
    background-color: black; 
    display: inline-block; 
} 
#left { 
    background-color: #fcc; 
    display: inline-block; 
    height: 100%; 
    width: 50px; 
} 
#middle { 
    background-color: #cfc; 
    display: inline-block; 
    height: 100%; 
    width: 100px; 
} 
#right { 
    background-color: #ccf; 
    display: inline-block; 
    height: 100%; 
    width: 590px; 
} 

Answer 1

Значение по умолчанию для vertical-align (относится к строковому уровню и table-cell элементов) является baseline (baseline предыдущего элемента), поэтому вы испытываете это.

Вы можете использовать vertical-align: top вместе с display: inline-block, чтобы предотвратить это.

Updated Fiddle

#container { 
 
    height: 500px; 
 
    width: 750px; 
 
    background-color: black; 
 
} 
 
#left { 
 
    background-color: #fcc; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100%; 
 
    width: 50px; 
 
} 
 
#middle { 
 
    background-color: #cfc; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100%; 
 
    width: 100px; 
 
} 
 
#right { 
 
    background-color: #ccf; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100%; 
 
    width: 590px; 
 
}

<div id="container"> 
 
    <div id="left">left left left left left</div> 
 
    <div id="middle">middle middle middle middle middle</div> 
 
    <div id="right">right right right right right</div> 
 
</div>

Answer 2

Это общая проблема с CSS, но есть несколько решений JavaScript, чтобы решить эту проблему, как этот: https://github.com/liabru/jquery-match-height

Answer 3

Добавление vertical-align: top; для каждого div решил проблему для меня. http://jsfiddle.net/bhw44w7q/1/

Answer 4

Вы можете попробовать использовать CSS-код float свойство: JsFiddle

#container { 
    height: 500px; 
    width: 750px; 
    background-color: black; 
} 
#left { 
    background-color: #fcc; 
    float:left; 
    height: 100%; 
    width: 50px; 
} 
#middle { 
    background-color: #cfc; 
    float:left; 
    height: 100%; 
    width: 100px; 
} 
#right { 
    background-color: #ccf; 
    float:left; 
    height: 100%; 
    width: 590px; 
}