0

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

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

我的问题是我不能设置内部 div 的宽度，因为它们必须具有相等的宽度，所以如果我的包装器是 300 像素并且我只有两个内部 div（一次 150 像素）等等。

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

问题是：是否可以自动调整内部 div 的大小（以获取整个包装器的宽度）？

谢谢！

4

5 回答 5

5

您可以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/

于 2012-04-19T10:07:55.660 回答
1

也许使用百分比？如果您有 2 个 div，请放置style="width:50%"在每个 div 上。如果您有 4 个 div，请放置style="width:25%"在每个 div 上。

于 2012-04-19T10:00:08.313 回答
0

您可能想在您的内部 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>
于 2012-04-19T10:03:41.093 回答
0

试试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')
})
})
于 2012-04-19T10:10:39.207 回答
0

你可以简单地做到这一点

#wrapper > div {
  float:left;
  width:25%;
}
于 2012-04-19T10:14:06.077 回答