如何正確定位div

我有3個div，main，right和left。主div包含右側和左側div，我想並排排列右側和左側div。我在這裏閱讀了幾篇文章，但一直未能獲得理想的結果。如何正確定位div

https://jsbin.com/lagikaxiwe/edit?html,css,output

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div#main-content { 
 
    background-color: bisque; 
 
    height: 100%; 
 
} 
 

 
div#right-content { 
 
    position: relative; 
 
    width: 35%; 
 
    height: 100%; 
 
    background-color: #ffffff; 
 
} 
 

 
div#left-content { 
 
    position: absolute; 
 
    width: calc(100% - 35%); 
 
    height: 100%; 
 
    margin: 0px 0px 0px 666px; 
 
    background-color: #00aeef; 
 
}

<div id="main-content"> 
 
    <div id="right-content"> 
 
    </div> 
 
    <div id="left-content"> 
 
    </div> 
 
</div>

來源

2017-09-15 Maddy

絕對定位是佈局網頁的一種非常糟糕的方法。它非常不靈活，並且有更好更快的響應選項。查看[** LearnLayout.com **]（http://learnlayout.com/） –

@Paulie_D，感謝您的鏈接。仍在學習如此堅持舊思想的CSS。 – Maddy

我沒有把代碼放在代碼片段中，因爲它沒有顯示整個事情。 – Maddy

最簡單的方法現在在容器上使用display: flex。看看我的片段設置 - 我刪除了很多其他的設置，這是沒有必要...

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
div#main-content { 
 
    background-color: bisque; 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 
div#right-content { 
 
    width: 35%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
div#left-content { 
 
    width: 65%; 
 
    height: 100%; 
 
    background-color: #00aeef; 
 
}

<div id="main-content"> 
 
    <div id="right-content"> 
 
    </div> 
 
    <div id="left-content"> 
 
    </div> 
 
</div>

來源

2017-09-15 16:07:51 Johannes

是與Flex兼容的？我必須確保它適用於所有瀏覽器。 – Maddy

取決於版本 - 從11開始，是的。請參閱http://www.caniuse.com/#search=flexbox – Johannes

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

div#main-content { 
     background-color: bisque; 
     height: 100%; 
     width: 100%; 
} 

div#right-content { 
    float: left; 
    width: 35%; 
    height: 100%; 
    background-color: #ffffff; 
} 

div#left-content { 
    width: calc(100% - 35%); 
    height: 100%; 
    background-color: #00aeef; 
    float: left; 
}

來源

2017-09-15 16:01:07 Sayan

我會親自使用display:inline-block對齊左右divs 並排並添加必要的寬度以將父寬度的100％相加。請務必在父項上使用font-size:0以消除左側和右側隔欄之間的空白，以便它們彼此正確對齊。

請務必爲您的左右內容分配字號，以便您的內容真正顯示！

此方法在很大程度上向後兼容所有瀏覽器。

div#main-content{ 
    font-size:0; 
} 

div#left-content{ 
    display:inline-block; 
    vertical-align:top; 
    width:65%; 
} 

div#right-content{ 
    display:inline-block; 
    vertical-align:top; 
    width:35%; 
}

來源

2017-09-15 16:08:59

如何正確定位div

回答

相關問題