Question

在我的页面上，我需要在水平方向上显示10个方框。每个盒子的最小宽度为150px，最大宽度为299px。页面应尽可能多地放在页面上，不留任何间隙，每个框具有相同的宽度（如果需要，可以通过舍入来扩展像素）。

示例：如果页面宽度为660px，则应使用宽度为165px的4个框。如果页面宽度为600px，则应使用宽度为150px的4个框。如果宽度为597px，则应使用3个199px的盒子，因为盒子不能低于150px。

底部的其余框应与上述框的宽度相同。

我如何完成上述工作？

请注意框的行如何在右边留下间隙。

使用以下代码（因为我被迫）

<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作为最后的手段。我应该自己做。

感谢。

Answer 1

我已将您的.cap div更改为使用％width而不是px，以便更轻松地获得响应式布局。

DEMO

主要CSS更改

.cap 
{
    background-color: red;
    float: left;
    height: 150px;
    width: 25%;
    min-width: 150px;
}

@media only screen and (max-width: 1024px) {
    .cap {
        width: 50%;
    }
}

使浮动的div填充整个父宽度

1 个答案: