CSS бок о бок div автоматическая равная ширина

<div id="wrapper" style="width:90%;height:100px;background-color:Gray;">
    <div id="one" style="height:100px;background-color:Green;float:left;"></div>
    <div id="two" style="height:100px;background-color:blue;float:left;"></div>
    <div id="three" style="height:100px;background-color:Red;float:left;"></div>
</div>

У меня есть родительский div, который будет содержать 2 или 3 дочерних div. Я хочу, чтобы дочерние divs принимали равную ширину автоматически.

Спасибо

Ответ 1

Это не невозможно. Это даже не особенно сложно, используя display: table.

Это решение будет работать в современных браузерах. Он не будет работать в IE7.

http://jsfiddle.net/g4dGz/ (три div s)
http://jsfiddle.net/g4dGz/1/ (два div s)

CSS

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

HTML:

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

Ответ 2

в современных браузерах вы можете использовать flexbox

Пример трех divs

Пример двух divs

CSS

#wrapper {
display: flex;    
width:90%;
height:100px;
background-color:Gray;
}
#wrapper div {
flex-basis: 100%;
}

HTML:

<div id="wrapper">
<div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
<div id="two">two two two two two two</div>

Ответ 3

Пробовали ли вы использовать width:33%?

Ответ 4

Ради совместимости со старыми браузерами, вот решение, которое работает.

HTML:

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

.parent{
    height: 200px;
    background: #f00;
}
.parent > div{
    width: calc(100%/3);
    height: 100%;
    float: left;
    background: #fff;
}

Однако, чтобы сделать его динамичным, поскольку вы знаете, будет ли это 2 или 3 столбца, вы можете поместить число в переменную и выполнить внутреннюю/встроенную css:

//$ count = 2 или 3

Внутренний CSS (рекомендуется)

...
<style>
    .parent > div{
        width: calc(100%/<?=$count;?>);
    }
</style>
<body>
...

Встроенный CSS:

<div class="parent">
    <div style="calc(100%/<?=$count;?>)"></div>
    <div style="calc(100%/<?=$count;?>)"></div>
    <div style="calc(100%/<?=$count;?>)"></div>
</div>

Ответ 5

.wrapper > div {
  width: 33.3%;
}

Это не работает в IE <= 6, поэтому вам лучше добавить некоторый общий класс в дочерние div и создать для него правило CSS.