如果有侧边栏，如何并排放置两个div

Question

当我将两个不同的div与侧边栏并排放置，并且在第一个（左侧）上只有右边距。而正确的人没有。

如何创建一个好的结构，以便我不必手动将style="margin:0"添加到正确的HTML元素中？

为了证明这一点，我创建了这个插图：

Answer 1

您可以使用nth-child(odd)按照商品的顺序定位每个奇数商品。

由于你没有提供任何实际的代码示例，我已经把我认为适合这种设计的结构放在一起。

以下是我敲了一个例子：http://codepen.io/michaelpumo/pen/OMgEKp

在CodePen中，我使用Jade for HTML和SCSS for 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>

<强> CSS

* {
  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;
}

希望它有意义。真正的问题在于.grid__item div，它有一个右边距，但是每个奇数都被删除了，这会产生我认为你想要的效果。

在任何情况下，看起来你都是在网格系统之后。那里有很多;最受欢迎的是Bootstrap。我强烈建议您使用其中一个：http://getbootstrap.com

就个人而言，我使用一个名为Neat的基于SCSS的网格：http://neat.bourbon.io/

Answer 2

<div class="main><!--- set this div to float left by setting width-->
 

<div class="news">

</div>

<div class="news">

</div>

</div> 

<asie></aside> <!-- set float right and setting width -->