css - Bootstrap 网格/CSS : Wrap longer column around shorter

Question

在最右边的两列中，如果左列较长，我想将其包裹在右列周围。这意味着左列的子 div 应该扩展它们的宽度。我试过 float 右侧的列，但这没有用。

我正在为列使用 bootstrap 网格系统。基本上我所拥有的是

<div class="col-xs-6" >
<div class="col-lg-6 left-column">
</div>
<div class="col-lg-6 right-column">
</div>
</div>

如果您想亲自体验实际网页，请参阅此处:mighty-cliffs-9655.herokuapp.com

Answer 1

您需要做的是创建多个包装器。

试一试，我刚刚给类提供了 css 值，用 Bootstrap 网格替换了它们。

%"variable"% = 占位符(我假设您在 CMS 中工作)

您只需将每个元素的高度设置为 100% 或自动，这应该可以完成工作!

<div class="wrapper width100% floatleft">
<div class="left width50% floatLeft">
    <div class="today floatLeft">%today%</div>
    <div class="tomorrow floatRight">%tomorrow%</div>
</div>
<div class="right width50% floatRight">
    <div class="sunday floatLeft">%sunday%</div>
    <div class="sidebar floatRight">%sidebar%</div>
</div>  
</div>