如何用CSS實現這種佈局？

我已經使用CSS和引導標準然而讓他們棧一樣，我不知道從哪裏開始創建的各個元素。可能嗎？

2016-01-13 Robert Farr

我會建議首先檢查您從該截圖獲得的頁面的HTML/CSS。如果在那裏有些東西你不能在你自己的代碼中重現，你可以向我們展示，我們有一個起點。就目前來看，這個問題非常模糊。 – mech

我覺得這個代碼是有幫助的，你根據上面的圖片...

請還發現樣品中CodePen

.icon { 
 
    width:100px; 
 
    height: 100px; 
 
    padding: 5px; 
 
} 
 

 
.left-pane { 
 
    height: 300px; 
 
    background:#00b386; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
<div class="row"> 
 
    <div class="col-sm-6 left-pane"> 
 

 
    </div> 
 
    <div class="col-sm-6"> 
 
     <div class="row"> 
 
      <div class="col-sm-3"> 
 
       <img src="image.jpg" class="icon"> 
 
      </div> 
 
      <div class="col-sm-9"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-3"> 
 
       <img src="image.jpg" class="icon"> 
 
      </div> 
 
      <div class="col-sm-9"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-3"> 
 
       <img src="image.jpg" class="icon"> 
 
      </div> 
 
      <div class="col-sm-9"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-01-13 05:51:29

試試這個代碼..

http://codepen.io/anon/pen/zrdrVd

<div class="container"> 
    <div class="row"> 

     <div class="col-md-6"> 

      <img src="http://placehold.it/1000x550" alt="test" class="img-responsive"> 

      <div class="carousel-caption"> 
       <h1>Example headline.</h1> 
      </div> 

     </div> 
       <div class="col-md-6"> 

      <div class="col-md-12"> 
      <h1>Example headline.</h1> 


     </div> 
        <div class="col-md-12"> 

      <h1>Example headline.</h1> 

     </div> 
        <div class="col-md-12"> 

      <h1>Example headline.</h1> 

     </div> 

     </div> 


</div> 


</div>

來源

2016-01-13 05:03:18

你可能會想閱讀更多的一些關於bootstrap grid system的可能性。

通過創建兩個半寬（12箇中的6個）列，然後在右列中嵌套3行來實現該佈局。例如：https://jsfiddle.net/edjgdg2s/

<div class="container"> 
    <div class="row margin-bottom"> 
    <div class="col-xs-6 col-xs-offset-3 border"> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-xs-6 tall border"> 
    </div> 

    <div class="col-xs-6"> 
     <div class="row"> 
     <div class="col-xs-12 border"> 
     </div> 
     </div> 

     <div class="row"> 
     <div class="col-xs-12 border"> 
     </div> 
     </div> 

     <div class="row"> 
     <div class="col-xs-12 border"> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

來源

2016-01-13 05:23:28 mzulch

如何用CSS實現這種佈局？

回答

相關問題