Question

我需要创建一个包装器（容器）（内部有2到4个div），如：

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

我的问题是我无法设置内部div的宽度，因为它们必须具有等宽，所以如果我的包装器是300px而我只有两个内部div（150px一次）等等。

但我无法将宽度设置为.css文件，因为据我所知，可以有2到4个div。

问题是：是否可以自动调整内部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个div，请在每个div上放置style="width:50%"。如果您有4个div，请在每个div上放置style="width:25%"。

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

如何自动设置宽度？

5 个答案: