Question

所以，我正在研究同样的事情并遇到类似的问题。我发现的所有回复都没有起作用。

这是小提琴：http://jsfiddle.net/VeritoAnimus/m34rmmda/

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>

    <style>

        body {
            margin: 0px;
            padding: 0px;
            font-size: 0px;
        }

        .my-block {
            display: inline-block;
            width: 31%; 
            min-height: 300px; 
            background-color: #0ff; 
            border: 1px solid black;
            margin: .5%;
            padding: .5%;
            text-align: center;
            align-content: center;
            vertical-align: top;
        }

        .inner-block {
            display: inline-block;
            min-height: 140px; 
            background-color: rgba(90, 213, 25, 0.42);
            border: 1px solid black;
            margin: 4px auto;
            padding: 4px;
            text-align: left;
        }

        .small-block {
            display: inline-block;
            width: 40px; 
            height: 40px; 
            background-color: #4cff00; 
            border: 1px solid black;
            margin: 4px;
            padding: 4px;

        }


    </style>

</head>
<body>

    <div class="my-block">


    </div>

    <div class="my-block">
        <div class="inner-block">
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>


        </div>

    </div>

    <div class="my-block">


    </div>


</body>
</html>

这就是我得到的以及我正在寻找的东西

实际结果 Actual

期望的结果 Desired

Answer 1

在这里： DEMO 。我在CSS中将宽度指定为.inner-block：

.inner-block {
       width: 81%;
 }

Answer 2

目前只有CSS才能达到预期的效果。我的解决方案是在加载后更改.inner-block的宽度。我将使用JS来计算其父.my-block的当前宽度，然后找到56px的下一个最小倍数（当考虑填充和边距时小盒子的大小）以获得{{1}的新大小}。否则，如果没有设置宽度，.inner-block将展开以尽可能多地填充父容器。

中心块中的左对齐内容（响应式布局）

2 个答案: