html - 墙体如何防止缝隙的形成

Question

我在创建墙时遇到了问题。

最好在图片中显示:

问题是:如何防止间隙的形成？

html

<div id="wrapper">
   <div class="shoot">...</div>
   <div class="shoot">...</div>
   <div class="shoot">...</div>
</div>

CSS

#wrapper{
    width: 769px;
    margin: 0 auto;
}
.shoot{
    width: 370px;
    height: auto;
    float: left;
    margin: 7px;
}

#wrapper{
  width: 769px;
  margin: 0 auto;
  background-color: red;
}
.shoot{
  width: 370px;
  height: auto;
  float: left;
  margin: 7px;
  background-color: blue;
}

.clear-div{
	clear: both;
}

<div id="wrapper">
  <div class="shoot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="shoot">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique id justo ac         varius. In massa velit, malesuada nec augue at, consectetur pulvinar dolor.
  </div>
  <div class="shoot">In massa velit, malesuada nec augue at.</div>
  <div class="clear-div"></div>
</div>

Answer 1

一种方法是将左侧部分包含在一个 div 中，并将包含 div 的部分设置为 float:left 并将右侧的 div 设置为 float:right。如果你想在右侧放置多个元素，你可以将所有右侧的 div 放入一个容器中，然后在其上设置 float:right。工作示例:https://jsfiddle.net/32azzrwb/2/