如何在CSS中使用豎線分隔的圖形和列？

Question

我想列出一些數據和由垂直線分離的圖形。 這是我做已經：

HTML：

<div class="containers vertical-divider"> 
    <div class="column one-third"> 
    <h1 class="span glyphicon glyphicon-th"></h1> 
    </div> 
    <div class="column two-thirds"> 
    <h3>Title</h3> 
    <p>consectetur adipiscing elit. Donec sit amet vestib.</p> 
    </div> 
    <div class="column two-thirds"> 
    <h3>Details</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipis.</p> 
    </div> 
    <div class="column one-third"> 
    <h1 class="glyphicon glyphicon-pencil"></h1> 
    </div> 
    <div class="column one-third"> 
    <h1 class="glyphicon glyphicon-remove"></h1> 
    </div> 
</div> 
<hr> 

CSS：

.vertical-divider{ 
    clear: both; 
    position: relative; 
} 

.vertical-divider:after { 
    clear: both; 
    content: " "; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

.vertical-divider .column:not(:first-child):after, .vertical-divider .columns:not(:first-child):after{ 
    background: #DDDDDD; 
    bottom: 0; 
    content: " "; 
    margin-left: -10px; 
    position: absolute; 
    top: 0; 
    width: 1px; 
} 

/* Very simple grid for example */ 
.containers { position: relative; width: 960px; margin: 20px auto; padding: 0; } 

.containers .column, .containers .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 

.containers .one-third.column { width: 50px; } 

.containers .two-thirds.column { width: 250px; } 

小提琴：http://jsfiddle.net/xxpe6fnw/

正如你所看到的問題是與右側glyphicons ，每列中的寬度也不響應。

如果有人有更好，更容易的想法得到相似的結果（也許使用一些引導功能？），然後我在聽。

Answer 1

嘗試使用input-group和input-group-addon。

我叉你的小提琴：http://jsfiddle.net/o7es6jvu/

<span class="input-group-addon" id="basic-addon1"><h1 class="glyphicon glyphicon-pencil"></h1></span> 

Answer 2

我使用col-md-*和col-sm-*引導的響應類了你的代碼的新版本。

你可以試試嗎？

<div class="container"> 
    <div class="col-md-12 col-sm-12"> 
    <div class="row"><!-- Repeat this row for each line you want --> 
     <div class="col-md-2 col-sm-2"> 
     <h1 class="glyphicon glyphicon-th"></h1> 
     </div> 
     <div class="col-md-4 col-sm-4"> 
     <h3>Title</h3> 
     <p>consectetur adipiscing elit. Donec sit amet vestib.</p> 
     </div> 
     <div class="col-md-4 col-sm-4"> 
     <h3>Details</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipis.</p> 
     </div> 
     <div class="col-md-2 col-sm-2"> 
     <h1 class="glyphicon glyphicon-pencil"></h1> 
     </div> 
     <div class="col-md-2 col-sm-2"> 
     <h1 class="glyphicon glyphicon-remove"></h1> 
     </div> 
    </div><!-- End repeat --> 
    </div> 
</div> 

小提琴：Here

Answer 3

試試這個。

標記

<div class="wrapper"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-1"> 
       <h1 class="span glyphicon glyphicon-th"></h1> 
      </div> 
      <div class="col-md-9"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <h3>Title</h3> 
         <p>consectetur adipiscing elit. Donec sit amet vestib.</p> 
        </div> 
        <div class="col-md-6"> 
         <h3>Details</h3> 
         <p>Lorem ipsum dolor sit amet, consectetur adipis.</p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-1"> 
       <h1 class="glyphicon glyphicon-pencil"></h1> 
      </div> 
      <div class="col-md-1"> 
       <h1 class="glyphicon glyphicon-remove"></h1> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-1"> 
       <h1 class="span glyphicon glyphicon-th"></h1> 
      </div> 
      <div class="col-md-9"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <h3>Title</h3> 
         <p>consectetur adipiscing elit. Donec sit amet vestib.</p> 
        </div> 
        <div class="col-md-6"> 
         <h3>Details</h3> 
         <p>Lorem ipsum dolor sit amet, consectetur adipis.</p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-1"> 
       <h1 class="glyphicon glyphicon-pencil"></h1> 
      </div> 
      <div class="col-md-1"> 
       <h1 class="glyphicon glyphicon-remove"></h1> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-1"> 
       <h1 class="span glyphicon glyphicon-th"></h1> 
      </div> 
      <div class="col-md-9"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <h3>Title</h3> 
         <p>consectetur adipiscing elit. Donec sit amet vestib.</p> 
        </div> 
        <div class="col-md-6"> 
         <h3>Details</h3> 
         <p>Lorem ipsum dolor sit amet, consectetur adipis.</p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-1"> 
       <h1 class="glyphicon glyphicon-pencil"></h1> 
      </div> 
      <div class="col-md-1"> 
       <h1 class="glyphicon glyphicon-remove"></h1> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

[class*="col-"]{ 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 
.wrapper { 
    background-color: #ccc; 
    width: 100%; 
} 
.container { 
    background-color: #fff; 
    margin: 0 auto; 
    max-width: 650px; 
} 
.container > .row{ 
    border: 1px solid #f00; 
    overflow: hidden; 
} 
.container > .row > div{ 
    border-right: 1px solid #f00; 
} 
.container > .row > div:last-child{ 
    border-right: none; 
} 

演示：https://jsfiddle.net/codeandcloud/d5b0ztxm/7/show/

Answer 4

添加這下面的代碼來調整您的垂直線，調整保證金和PADD根據你的計劃。爲了使它在移動設備上具有響應能力，那麼您必須使用媒體查詢工作。

.vertical-divider{ 
    clear: both; 
    position: relative; 
} 

.vertical-divider:after { 
    clear: both; 
    content: " "; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 


/* Very simple grid for example */ 
.containers { position: relative; width: 90%; margin: 20px auto; padding: 0; } 

.containers .column, .containers .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 

.containers .one-third.column { width: 10%; } 

.containers .two-thirds.column { width: 25%; } 
.containers .one-third.column:not(:first-child)::before{ 
    background: #ddd; 
    bottom: 0; 
    content: " "; 
    margin-left: -10px; 
    position: absolute; 
    top: 0; 
    width: 1px; 
} 
.containers .two-thirds.column ::before{ 
    background: #ddd; 
    bottom: 0; 
    content: " "; 
    margin-left: -10px; 
    position: absolute; 
    top: 0; 
    width: 1px; 
}