css - 跨越多行的内容区域

Question

我正在尝试创建这样的布局:

http://jsfiddle.net/LLbnhb9v/

基本上，A和C是侧边栏元素，B是主要内容:

我的标记如下:

<div class="container">
    <div class="col-sm-2">
        A
    </div>
    <div class="col-sm-8">
        B
    </div>
    <div class="col-sm-2">
        C
    </div>
</div>

这适用于移动设备，但在桌面上 C 位于 B 下方。如何在没有任何疯狂的 css 技巧的情况下使 B(主要内容)“跨越”多行？

Answer 1

您需要让粉红色部分具有 pull-right 类，让绿色部分具有 clearfix 类。 http://jsfiddle.net/LLbnhb9v/19/

<div class="container">
    <div class="col-sm-2">
        <div class="x a">
            short<br>text
        </div>
    </div>
    <div class="col-sm-10 pull-right">
        <div class="x b">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </div>
    </div>
    <div class="col-sm-2 clearfix">
        <div class="x c">
            short<br>text
        <div>
    </div>
</div>

我也稍微改变了布局。第一层的 div 应该只关心布局。如果您添加填充和边距以及其他东西，那么它们可能会出现一些问题并且无法按预期工作。我将 a b c 和 x 类移动到子元素上。