墙如何防止形成间隙

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/