跨越多個行的內容區域

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以下。如何讓B（主要內容）跨越多行而「跨越」而沒有任何瘋狂的CSS技巧？

Answer 1

你需要粉紅色部分有拉右類和綠色部分有一個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類移到子元素上。