Question

我的一个网站上有以下代码：

body {
  width: 1020px;
  margin: 0 auto;
}

.box {
  width: 500px;
  float: left;
}

.clear {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0;
}

<body>

  <p>Headline</p>
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="clear"></div>

  <p>Headline</p>
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="clear"></div>

  <p>Headline</p>
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="clear"></div>

</body>

我想在左侧的每个方框div上添加10px的边距右边，这样两个div之间就会有一个相邻的间隔。

我试图用以下方法解决这个问题：nth-child（）但是它不起作用，因为还有其他元素，比如p标签和清除元素。

有没有办法用css解决这个问题？

顺便说一下，我无法改变元素的结构或类型！

Answer 1

您的HTML没有帮助。理想情况下，你会有一个div包装所有div与类.box。类似的东西：

＆＃13;

.boxesWrapper {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.box{
  border: 1px dotted black;
  margin-right: 10px;
  width: 100px;
}

＆＃13;

<body>

  <p>Headline</p>
  <div class="boxesWrapper">
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="box">content</div>
  </div>
  <p>Headline</p>
  <div class="boxesWrapper">
    <div class="box">content</div>
    <div class="box">content</div>
  </div>

  <p>Headline</p>
  <div class="boxesWrapper">
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="box">content</div>
  </div>

</body>

＆＃13;

Answer 2

如果您可以在每个群组周围添加nth-of-type()，则可以使用container选择器解决此问题：

body {
  width: 1020px;
  margin: 0 auto;
}

.box {
  width: 500px;
  float: left;
  background: red;
}

.container div.box:nth-of-type(odd) {
  margin-right: 10px;
}

.clear {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0;
}

<body>

  <div class="container">
    <p>Headline</p>
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="clear"></div>
  </div>

  <div class="container">
    <p>Headline</p>
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="clear"></div>
  </div>

  <div class="container">
    <p>Headline</p>
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="clear"></div>
  </div>

</body>

将div放在css中，一个留下一个

2 个答案: