在我的页面上，我需要水平显示10个框。每个框的最小宽度为150像素，最大宽度为299像素。该页面应在页面上尽可能多地容纳框，不留任何间隙，每个框具有相同的宽度（如果需要取整，则由于四舍五入而需要扩展一个像素）。
示例：如果页面的宽度是660px，则应使用165px宽度的4个框。如果页面的宽度为600像素，则应使用4个150像素宽度的框。如果宽度为597像素，则应使用199像素的3个框，因为一个框不能低于150像素。
底部的其余框应与上面的框具有相同的宽度。
我该如何完成以上工作？
我在这里有一个小提琴：http : //jsfiddle.net/CD4f2/1/
注意盒子的行如何在右边留出空隙。
使用以下代码（因为我被迫这样做）
<body>
<div id="mainPage">
<div id="bar">Width of a row of boxes should match the length of this bar.</div>
<div id="capTable">
<div class="cap" id="cap0">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap2">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap4">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap6">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap8">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
</div>
</div>
body
{
background-color:black;
}
.cap
{
background-color: red;
float: left;
height: 150px;
max-width: 299px;
min-width: 150px;
}
.capImage
{
background-color:blue;
float: left;
height: 37px;
width: 37px;
}
#bar
{
background-color: orange;
}
#cap0, #cap2, #cap4, #cap6, #cap8
{
background-color: green;
}
#mainPage
{
margin: 0 auto;
max-width: 800px;
min-width: 150px;
}
我也尝试过使用表，但是遇到了相同的问题，以及浮点数，显示和溢出的许多不同组合。
我相信我可以通过在CSS中手动指定不同的分辨率来做到这一点。但是，如果可能的话，最好选择一种更自动的方法。
我只想将javascript作为最后的手段。我应该能够做到这一点。
谢谢。
我将您的.cap div更改为使用％宽度而不是px，以使其更易于获得响应式布局。
主要CSS变更
.cap
{
background-color: red;
float: left;
height: 150px;
width: 25%;
min-width: 150px;
}
@media only screen and (max-width: 1024px) {
.cap {
width: 50%;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句