Html 有侧边栏时如何并排放置两个div

当我用边栏并排放置两个不同的div时，第一个div的右边（即左边）只有边距。对的人没有

如何创建一个好的结构，从而不必手动将

style=“margin:0”

添加到正确的HTML元素

为了证明这一点，我制作了以下插图：

---

您可以使用第n个子项（奇数）按项目顺序瞄准每个奇数项目

因为您没有提供任何实际的代码示例，所以我已经整理了一个适合这种设计的结构

下面是我想出的一个例子：

在代码笔中，我使用Jade表示HTML，使用SCSS表示CSS。我建议您使用它们，但如果您需要编译的代码，请参阅下面的内容

HTML

<div class="grid">
  <div class="grid__left">
    <div class="grid__hero"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
  </div>
  <div class="grid__right">
    <div class="grid__sidebar"></div>
  </div>
</div>

希望它有意义。问题的实质是

.grid\u项

div，它有一个右边空白，但每一个单数都会被删除，这会产生我想你想要的效果

在任何情况下，看起来你都在追求一个网格系统。外面有很多人；最流行的是引导。我强烈建议使用其中一种：

---

就我个人而言，我使用的是一个基于SCSS的网格，名为Neat:

指向图像的链接是无用的！为什么不使用Bootstrap、基础或任何其他网格系统？我现在没有能力显示所有的源代码，这就是为什么，没有办法从DIV恰好出现在右边的代码中检测到。不使用样式标记，您可以做的是创建一个专门用于零边距的类，如mr0Welcome to Stack Overflow！我对您的问题进行了编辑，以删除问题正文中的非建设性评论。我还将图像本身包含在正文中-有关格式的更多信息，请参阅编辑帮助。请编辑问题并提供识别特定问题所需的任何其他详细信息，如代码示例。祝你好运

* {
  box-sizing: border-box;
}

body {
  padding-top: 10px;
}

.grid {
  width: 600px;
  overflow: hidden;
  margin: 0 auto;
}
.grid__left, .grid__right {
  float: left;
}
.grid__left {
  width: 400px;
}
.grid__right {
  width: 200px;
  padding-left: 10px;
}
.grid__hero, .grid__item, .grid__sidebar {
  background: #000;
}
.grid__hero {
  width: 100%;
  height: 200px;
  margin: 0 0 10px 0;
}
.grid__hero {
  width: 100%;
  height: 200px;
  margin: 0 0 10px 0;
}
.grid__item {
  float: left;
  clear: none;
  width: 195px;
  height: 200px;
  margin: 0 10px 10px 0;
}
.grid__item:nth-child(odd) {
  margin-right: 0;
}
.grid__sidebar {
  width: 100%;
  height: 410px;
}