將兩個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;
}

這是一個有效的例子。

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