如何在這個CSS佈局

我有一個網站，我想保持這種佈局（與數據之間的邊界），當窗口被調整至移動尺寸同樣對齊左右的內容。一切正常的情況下，最多可以有10個字符的右列，但是當有更多的字符跳到新的一行時，內容不再與左側的數據對齊。正如你所看到的，「First | Lorem Ipsum」保持良好對齊，但「Second | Here's一些更寬的內容Lorem Ipsum」擾亂了整個佈局。有沒有辦法解決它以某種方式？如何在這個CSS佈局

這裏的鏈接Codepen：http://codepen.io/anon/pen/MJWjJJ?editors=1100

.view__content--info p { 
    font-weight: bold; 
} 

.view__content--border { 
    border-left: 1px solid grey; 
} 

<div class="row"> 
    <div class="col-md-8"> 
    <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info"> 
     <p>First</p> 
     <p>Second</p> 
     <p>Third</p> 
     <p>Fourth</p> 
     <p>Fifth</p> 
     <p>Sixth</p> 
    </div> 
    <div class="col-md-6 col-sm-6 col-xs-6 view__content--border"> 
     <p>Lorem Ipsum</p> 
     <p>Here's some wider content Lorem Ipsum</p> 
     <p>Hello World</p> 
     <p>Ipsum</p> 
     <p>Something</p> 
     <p>Here</p> 
    </div> 
    </div> 
</div>

來源

2017-01-03 Smithy

你現在的樣子這樣做並不是一個很好的選擇來獲得你正在尋找的東西。更改html結構。 – Aslam

您可以強制文字留在一條線，但是這不是很好的解決方案，恕我直言...... – sinisake

可以設置'.view__content - 邊界{空白：NOWRAP;}'但我之前大家的意見一致 – Banzay

當你正在使用的引導。我建議你使用描述列表。它會給你想要的。

FYI：當您使用列類如.COL-MD-3，請務必使用行，把列在它

<dl class="dl-horizontal"> 
    <dt>Description lists</dt> 
    <dd>A description list is perfect for defining terms.</dd> 
    <dt>Euismod</dt> 
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> 
    <dd>Donec id elit non mi porta gravida at eget metus.</dd> 
    <dt>Malesuada porta</dt> 
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd> 
    <dt>Felis euismod semper eget lacinia</dt> 
    <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> 
</dl>

來源

2017-01-03 11:11:27 Aslam

你可以試試這樣說：對於每個項目創建一個新的行。當寬度太小並且創建新行時，兩列將向下移動，而不是僅右列。

<div class="row"> 
    <div class="col-md-8"> 
    <div class="row"> 
     <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info"> 
     <p>First</p>   
     </div> 
     <div class="col-md-6 col-sm-6 col-xs-6 view__content--border"> 
     <p>Lorem Ipsum</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info"> 
     <p>Second</p>   
     </div> 
     <div class="col-md-6 col-sm-6 col-xs-6 view__content--border"> 
     <p>Here's some wider content Lorem Ipsum</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info"> 
     <p>Third</p>   
     </div> 
     <div class="col-md-6 col-sm-6 col-xs-6 view__content--border"> 
     <p>Hello World</p> 
     </div> 
    </div> 
    </div> 
</div>

來源

2017-01-03 11:10:55 Pie

如何在這個CSS佈局

回答

相關問題