Question

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

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

.teaser：nth-child（3）{border：1px solid red;}宽度和边距总体上为99.9％，此处的边框采用此点的组合宽度并且正在包裹，移除边框和它很好（否则减小宽度或边距）。

Answer 2

我认为您的问题来自与每个预告片div相关的边距。您需要为.teaser设置较低的宽度值，以补偿额外的边距空间。我和你的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更改.teaser css，您将在一行中找到所有<div>。如果你想在一行中做3 <div>并在第二行休息，给 .teaser 类宽度：30％; ，你会发现你需要的输出。

浮动没有正确浮动

3 个答案: