如何用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实现这种布局？

回答

相关问题