难以在html页面中并排放置2个div

Question

我试图将两个div放在一边，但我无法做到。我已经完成谷歌和以前的stackoverflow搜索相同的问题，并尝试使用这些，但它并没有为我工作。 这是我的来源：

HTML：

Job

CSS：

<section id="controls" class="body">

<div id="TM" class="body">     
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" /> 
</div>  

<div id="wrapper" class="body">
<div id="BL" class="body"></div>  
<div id="BR" class="body"></div>  
</div>  

</section><!-- /#controls -->


<section id="extras" class="body">
  <div class="blogroll">

  </div><!-- /.blogroll -->

  <div class="social">

  </div><!-- /.social -->
</section><!-- /#controls -->

以下是当前代码的输出：

Answer 1

您应该减小#BL和#BR元素的宽度或删除margin-left。你的兄弟姐妹占父母宽度的100％以上。 100％+余量。

Answer 2

使用box-sizing: border-box

＆＃13;

＆＃13;

*{box-sizing: border-box}
#controls {
  height: 600px;
  width: 800px
}
#wrapper {
  width: 800px;
  height: 300px
}
#TM {
  width: 100%;
  border: 1px solid black;
  height: 300px
}
#BL {
  width: calc(50% - 2px);
  border: 1px solid black;
  height: 300px;
  float: left;
  margin-top: 2px;

}
#BR {
  width: 50%;
  border: 1px solid black;
  height: 300px;
  float: right;
  margin-top: 2px;

}

＆＃13;

<section id="controls" class="body">
  <div id="TM" class="body">
    <img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
  </div>
  <div id="wrapper" class="body">
    <div id="BL" class="body"></div>
    <div id="BR" class="body"></div>
  </div>
</section>
<!-- /#controls -->
<section id="extras" class="body">
  <div class="blogroll">
  </div>
  <!-- /.blogroll -->
  <div class="social">
  </div>
  <!-- /.social -->
</section>
<!-- /#controls -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

你的问题是Float在css中。 如果你想并排放置两个div，你应该将它们都设置为相同的浮动。

  

#left_one{float:left}   #right_one{float:left}

#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }

Answer 4

要并排放置2个DIV，它们应该是内联块或浮动块。除此之外;

容器宽度= Div1的外部宽度+ Div2的外部宽度

Div的外宽=边距 - 左边+ DIV宽度+边距 - 右边+ 2 x边框宽度

因为你有1px边框和2px边距。你需要从div的宽度中减去它们。