适当的浮动css网格

Question

如果我有像这样的css浮动网格

.float {
  float: left;
  width: 45%;
  border: 1px solid black;
  margin: 1%;
  padding: 1%;
}

如何强制每条新线在相同的水平线上对齐？

http://codepen.io/anon/pen/Kzezjp?editors=1100

Answer 1

如果您希望每个有效行以新的垂直级别开始，则需要在每个第二个div之后清除浮点数。

Codepen Demo

＆＃13;

＆＃13;

.float {
  box-sizing: border-box;
  float: left;
  width: 45%;
  border: 1px solid black;
  margin: 1%;
  padding: 1%;
}
div:nth-of-type(2n+1) {
  clear: left;
}

＆＃13;

<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
  nunc justo, efficitur eu nisl in, convallis aliquet sapien.nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>
<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>

<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
  nunc justo, efficitur eu nisl in, convallis aliquet sapien.nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>
<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你想使用 vertical-align ，你应该减小宽度：

    .float {
      float: left;
      width: 45%;
      border: 1px solid black;
      margin: 1%;
      padding: 1%;
    vertical-align:middle;
width:30%;
    }