将两个div并排覆盖整个页面宽度

Question

我有这样的东西：

<div class="container">
    <div class="left">
        (an image)
    </div>
    <div class="right">
        (some divs and other text)
    </div>
</div>

我希望将两个div并排放置

.container {
    width: 100%;
}
.left, .right {
    float: left;
    width: 50%;
}

我需要做什么，因为这不起作用

Answer 1

您的代码没有问题... Divs并排排列......

.container {
  width: 100%;
}

.left,
.right {
  float: left;
  width: 50%;
  
  border: 1px solid red;
  box-sizing: border-box;
}

<div class="container">
  <div class="left">
    (an image)
  </div>
  <div class="right">
    (some divs and other text)
  </div>
</div>

Answer 2

如果你想做半屏传播的全高div。这将有效。

.Left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
  background-color:black;

}

.Right {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0; 
  background-color:blue;
}

这是一个有效的Example.

Answer 3

也许你给了孩子div填充，边距，边框 它应该工作 试试这个

减少子div的宽度 像这样50％到49％或

.container {
    width: 100%;
    margin:0;
    padding:0;
    border:0;
}
.left, .right {
    float: left;
    width: 50%;
    margin:0;
    padding:0;
    border:0;
}