如何并排放置溢出'divs'

Question

DEMO HERE

我在容器中有两个div。两个div都有100％和100％的高度。我如何并排放置这些div？

我尝试了float:left和display:inline-block，但似乎没有任何效果。第二个div始终位于第一个div之下，而不是并排

P.S。我不想使用绝对位置，我想要一个div溢出。

Answer 1

如果它们都具有100％宽度，则无法并排获得第二个宽度。你应该使用＆＃34;宽度：50％＆＃34;在那些div中（我想他们没有边距或填充），然后＆＃34; float：left＆＃34;第一个。第二个应该在第一个的右侧。

Answer 2

如果您要并排添加两个div，则无法设置div width 100%，您可以设置width 50%以便在不使用display:inline-block

的情况下并排查看两者

.innerDivs{
   width:50%;   // Change 100% to 50%
   height:100%;
   float:left;
}

检查 Demo

---

您应该在外部div 中添加 overflow:hidden; 属性来解决此问题

检查此 Demo

HTML

<div style="width:300px;height:100px;border:3px solid black;margin-top:100px;margin-left:100px;overflow:hidden;">
  <div class="innerDivs" style="background:orange"></div>
  <div class="innerDivs" style="background:red"></div>
</div>

CSS

.innerDivs{
  width:100%;
  height:100%;
  float:left; 
}