Question

我想让每个portfolio_box_13 div在他们自己的行上以100％宽度。目前，两个div共享一条线（使用包装器）为50％。我希望包装器中的两个div都是相同的高度。

我正在为移动设备创建一个布局，所以如果可能的话我不想修改HTML。

我尝试将宽度设置为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 height指定min-height或.portfolio_box_13，因为它没有内容。

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

<强>段

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

重构您的HTML。

我会重新编码标记，以便上面的“纯色”块有一个共享选择器/类例如。 .solidbox （你如果必须，可以稍后添加更多内容

..然后您的文字内容有一个特定于此例如 .textbox选择器的共享类，然后您只需将width: 100%;设置为两个display:inline-block; < / p>

Simplified JSfiddle Demo. ＆lt; - （与实际颜色/内容交换）

使用以下3个选择器：

.solidbox { 
   // this is your solid box
}

.textbox { 
  // this is your text content box
}

.red { 
  // this is your colored backgrounds
}

如果您不想要静态高度，只需将height:设置为100%;并使用min-height: 50px; // sample number即可！

Div在单独的行上定位

2 个答案: