Question

结果必须在第4页黑色块中，每个块必须是200像素宽。块之间的距离为10像素。这些块在一条线上绘制。在布局中考虑适应性，即相对屏幕分辨率块可以是单行3,2或1。

THX。

Answer 1

要执行此操作，您必须将display: inline-block添加到阻止在一行上的子项（如果屏幕的大小足够宽），否则如果屏幕大小缩小，则块将进入2行等。 jsfiddle上的Source

＆＃13;

.main-block{
   
}

.child-block {
    display: inline-block;
    background-color: black;
    width:200px;
    height:50px;

    margin:5px
}

＆＃13;

<div class="main-block">
    <div class="child-block">
    </div>
    <div class="child-block">
    </div>
    <div class="child-block">
    </div>
    <div class="child-block">
    </div>
</div>

＆＃13;

[v] 4个黑色块

[v] 每个块必须为200像素宽

[v] 块之间的距离为10像素。

[v] 这些块在一行上绘制。

[v] 在布局中考虑适应性，即相对屏幕分辨率块可以是单行3,2或1。

一行四个街区。仅使用CSS

1 个答案: