如何按照我想要的方式将这3个元素与Bootstrap类对齐？

3 square layout

我希望发生的是，我想在右边的正方形/长方形有灵活性，尽可能多的高度延伸可能的，但我想要的在底部的正方形总是在第一个正方形下方平齐，而不是看起来在第二个正方形的末端创建的第二排。

我试图在JSFiddle here上重新创建它，但它并没有像我想要的那样出来。无论哪种方式，希望这些应该充分解释我正在努力实现的目标。

Note that the solution must be responsive on mobile devices too.

来源

2014-09-26 marcamillion

试试这个

html { 
 
\t overflow-y: scroll; 
 
} 
 

 
html, body { 
 
\t height: 100%; 
 
} 
 

 
body { 
 
\t font-family: 'Source Sans Pro', sans-serif; 
 
    background: #F2F2F2; 
 
    font-size: 1.3em; 
 
} 
 

 
.post, .comments { 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 1px 1px #aaa; 
 
    padding: 3em; 
 
    margin: 2em auto; 
 
/* \t margin-top: 1em;*/ 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 

 
<body> 
 
    
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-6"> 
 
       <div class="post">box 1</div> 
 
       <div class="post">box 2</div> 
 
      </div> 
 
      <div class="post col-xs-6"> 
 
       <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</body>

希望它可以帮助..

感谢

来源

2014-09-26 02:44:57 jrran90

你能告诉我你改吧。谢谢！ – marcamillion 2014-09-26 02:49:51

没关系......算了一下。 – marcamillion 2014-09-26 03:00:05

如何按照我想要的方式将这3个元素与Bootstrap类对齐？

回答

相关问题