html - Div定位在单独的行

Question

我想让每个 portfolio_box_13 div 在它们自己的行上以 100% 的宽度。目前，两个 div 以 50% 的比例共享一条线(使用包装器)。我希望包装器中的两个 div 具有相同的高度。

我正在为移动设备创建布局，因此我不想尽可能修改 HTML。

[jsFiddle] .

我曾尝试将宽度设置为 100%，但随后彩色 div 占据了大部分宽度。

澄清一下:我希望它在一行上显示红色 div，在其下方显示粉红色 div。例如，请参见图片。

HTML:

<div class="portfolio_wrap">
    <div class="portfolio_box_13 red">
    </div>
    <div class="portfolio_box_13 pink">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 green">
    </div>
    <div class="portfolio_box_13 lightgreen">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 blue">
    </div>
    <div class="portfolio_box_13 lightblue">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>

CSS:

.portfolio_wrap {
    width: 100%;
    height: 33.4%;
    display: table;
}
.portfolio_box_13 {
    width: 50%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    overflow:hidden;
}

Answer 1

您可以简单地使用:

.portfolio_box_13 {
    float:left;
    clear:left;
    min-height:120px;
}

这里的技巧是需要为 div .portfolio_box_13 指定一个 height 或 min-height，因为它没有内容。

要使它们具有相同的高度，您需要设置一个固定的高度。

片段

.portfolio_wrap {
    width: 100%;
    height: 33.4%;
    display: table;
}
.portfolio_box_13 {
    width: 50%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    overflow:hidden;
    float:left;
    clear:left;
    min-height:120px;
}
.red {
    background: red;
}
.green {
    background: green;
}
.blue {
    background: blue;
}
.pink {
    background: pink;
}
.lightblue {
    background: lightblue;
}
.lightgreen {
    background: lightgreen;
}

<div class="portfolio_wrap">
    <div class="portfolio_box_13 red">
    </div>
    <div class="portfolio_box_13 pink">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 green">
    </div>
    <div class="portfolio_box_13 lightgreen">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 blue">
    </div>
    <div class="portfolio_box_13 lightblue">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>