Question

我有这样的布局：

3 square layout

我想要发生的是，我希望右侧的方形/矩形具有尽可能多地延伸高度的灵活性，但我希望底部的方形始终在第一个方格下面齐平，而不是看似在第二个广场末端创建的第二排。

我试图在JSFiddle here上重新创建它，但它并没有像我想要的那样出现。无论哪种方式，希望这些可以完全解释我想要实现的目标。

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

Answer 1

试试这个

＆＃13;

html {
	overflow-y: scroll;
}

html, body {
	height: 100%;
}

body {
	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;
/*	margin-top: 1em;*/
}

＆＃13;

<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>

＆＃13;

希望有所帮助......

由于

如何使用Bootstrap类以我希望的方式对齐这3个元素？

1 个答案: