浮点数未正确浮动

Question

看看这个小提琴https://jsfiddle.net/bn2w47o7/

我想把3个div放在一行，然后放一行。上面的链接是我的一个尝试，在我看来，所有的div都应该在一行中浮动，但正如你在小提琴中看到的那样，它不是。

这是代码：

.teaser {
  width: 32.33%;
  margin: 0 1% 20px 0;
  float: left;
  text-align: center;
}
.teaser:nth-child(3n+0) {
  border: 1px solid red;
}

<div class="teaser">
  <img src="" />
  <div class="kategorie">Kat</div>
  <h3><a href="#">One</a></h3>
  <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div class="teaser">
  <img src="" />
  <div class="kategorie">Kat</div>
  <h3><a href="#">Two</a></h3>
  <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut .</div>
</div>
<div class="teaser">
  <img src="" />
  <div class="kategorie">Kat</div>
  <h3><a href="#">Three</a></h3>
  <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div class="teaser">
  <img src="" />
  <div class="kategorie">Kat</div>
  <h3><a href="#">Four</a></h3>
  <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita</div>
</div>
<div class="teaser">
  <img src="" />
  <div class="kategorie">Kat</div>
  <h3><a href="#">Five</a></h3>
  <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit ametet ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

Answer 1

.treaker:nth child(3(｛border:1px实心红色；｝宽度和边距使其整体达到99.9%，此处的边框取该点的组合宽度，并进行包装，移除边框即可(否则请减小宽度或边距(。

Answer 2

我认为您的问题来自于与每个预告片div相关的边距。您需要为.treaker设置较低的宽度值来补偿额外的边距空间。我把你的jsfiddle搞砸了，成功地连得三个，宽度大约为30%：

.teaser {
	width: 30.33%;
	margin: 0 1% 20px 0;
	float: left;
	text-align: center;
}

JSFiddle

Answer 3

.teaser {float:left; text-align:center; margin-right:20px; width:18%;}

用上面给出的css更改你的.teacher css，你会在一行中找到所有的<div>。如果你想在一行中做3个<div>，而在第二行中休息，则宽度为30%到.treaker类，您将找到所需的输出。