對齊兩個div並排覆蓋整個頁面寬度

Question

我已經simething這樣的：

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

，我想通過側

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

什麼我需要做的toalign 2個div的一面，因爲這不工作

Answer 1

沒有有問題，你的代碼...的div是並排排列...

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