Question

是否可以制作多行div？只有2个基本行。

我已经能够为我所寻找的东西做一个静态的例子。但是，我不太确定如何使这个响应。将百分比％与当前css一起使用是不行的。

HTML

<div class='wrap'>
<div class = "blocks">
    div 1
</div>

<div class = "blocks">
    div 2
</div>

<div class = "blocks">
    div 3
</div>

<div class = "blocks">
    div 4
</div>
</div>

CSS

.blocks {display: inline-block; border: solid 1px red; width: 100px;}

.wrap{
    width:210px;   
    border: solid 1px black;
}

Answer 1

如果要对块宽度使用百分比值，则必须确保块（1）之间没有空白，并且块的边框和填充包含在百分比（2）中。< / p>

.blocks {
    width: 50%;
    float: left; /* (1) */
    box-sizing: border-box; /* (2) */
    border: 1px solid red;
}

要在两个块之间添加边距，您必须在%中给出边距，并确保两个块宽度和边距加起来为100％。我在JSFiddle上创建了一个示例。

Answer 2

我认为你正在寻找类似的东西：

＆＃13;

.blocks {
    display: block;
    float: left;
    border: solid 1px red;
    width: 25%;
    box-sizing : border-box
}

.wrap {
    width:400px;   
    padding: 1px;
    border: solid 1px black;
}

.wrap:before,
.wrap:after {
    content: "";
    display: table;
}

.wrap:after {
    clear: both;
}

@media (max-width: 800px) {
    .blocks {
        width:50%;
    }
}

@media (max-width: 400px) {
    .blocks {
        width:100%;
    }

    .wrap {
        width:100%;   
    }
}

＆＃13;

<div class='wrap'>
    <div class = "blocks">
        div 1
    </div>

    <div class = "blocks">
        div 2
    </div>

    <div class = "blocks">
        div 3
    </div>

    <div class = "blocks">
        div 4
    </div>
</div>

＆＃13;

（另见this Fiddle）

Answer 3

你应该使用这个：http://getbootstrap.com/css/#grid。网格将帮助您在一行上创建多个列。

但是如果你想使用自定义css，那么：

.wrap{
width:100%;
clear:both;  
border: solid 1px black;
}
.blocks {
width:25%;border: 1px solid red;
}

响应多行div

HTML

CSS

3 个答案: