Как установить ширину автоматически?

Question

мне нужно создать оболочку (контейнер) с (от 2 до 4 DIV внутри), как:

<div class="wrapper"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

моей проблема в том, что я не могу установить ширину для внутренних див, потому что они должны иметь равна ширине, поэтому, если моя обертка 300px, и у меня есть только два внутренних div (150px один раз) и т. д.

Но я не могу установить ширину в .css-файл, потому что, как я сказал, может быть от 2 до 4 divs.

Вопрос: можно ли авторизовать внутренние div (чтобы получить всю ширину обертки) или нет?

Спасибо!

Answer 1

Вы можете использовать display:table свойство для этого:

.wrapper{ 
    width:300px; 
    border:2px solid green; 
    display:table; 
} 
.wrapper > div{ 
    display:table-cell; 
    border:1px solid red; 
    height:50px; 
} 

Проверьте это http://jsfiddle.net/7E9Nj/

Answer 2

Возможно, используя проценты? Если у вас есть 2 divs, положите style="width:50%" на каждый div. Если у вас есть 4 divs, положите style="width:25%" на каждый div.

Answer 3

вы можете попробовать% в ваш внутренний DIV-х

, например, вы могли бы иметь что-то вроде этого:

<div id="wrapper"> 
    <div style="width:25%"></div> 
    <div style="width:25%"></div> 
    <div style="width:25%"></div> 
    <div style="width:25%"></div> 
</div> 

Answer 4

Попробуйте jquery. Это сработает.

$(document).ready(function(){ 
var divWidth = parseInt($('.wrapper').css('width')); 
var divSizes = parseInt($('.wrapper >div').size()); 
var divWidth = divWidth/divSizes; 

$('.wrapper >div').each(function(){ 
$(this).css('width', divWidth+'px') 
}) 
}) 

Answer 5

вы можете сделать это просто

#wrapper > div { 
    float:left; 
    width:25%; 
}