並列兩個div - 流體顯示

125

我想並排放置兩個div並使用下面的CSS。並列兩個div - 流體顯示

#left { 
    float: left; 
    width: 65%; 
    overflow: hidden; 
} 

#right { 
    overflow: hidden; 
}

HTML很簡單，在包裝div中有兩個左右div。

<div id="wrapper"> 
    <div id="left">Left side div</div>  
    <div id="right">Right side div</div> 
</div>

我已經嘗試了很多次搜索＃2和其他網站有更好的方式太多，但找不到確切的幫助。

因此，代碼工作很好乍一看。問題是這樣的，左邊的div自動獲得填充/邊距，因爲我在（％）中增加了寬度。所以，在65％的寬度，左邊的div有一些填充或邊距，並不完全與正確的div對齊，我試圖填充/保證金0，但沒有運氣。其次，如果我放大頁面，右邊的div滑動到左邊的div下方，就像流體顯示一樣。

注意：我很抱歉，我搜索了很多，這個問題已被問了很多次，但這些答案並沒有幫助我，我已經解釋了我的情況是什麼問題。

我希望有一個解決方案。

謝謝。

編輯：對不起，我的HTML問題，有兩個「盒子」divs在左右兩側，他們填充％，所以左側顯示更多的填充，因爲更大的寬度。對不起，上面的CSS完美的作品，其流體顯示和固定的，對不起，問錯了問題....

來源

2013-06-20 Waleed

有兩個盒子的div？什麼是盒子div？這個問題不清楚。 –

將此CSS用於我的當前網站。它工作完美！

#sides{ 
margin:0; 
} 
#left{ 
float:left; 
width:75%; 
overflow:hidden; 
} 
#right{ 
float:left; 
width:25%; 
overflow:hidden; 
}

來源

2013-08-13 17:08:01 Waleed

float：left;在#right上非常重要。 – Xdg

+34

很高興聽到您的發現並接受了您自己的答案，但是什麼是#sides？這不是你原來的問題。 – JMD

在子節點（#right）上使用float：left會殺死父div（#wrapper）的高度。所以這個解決方案取決於需求。更好地給一個孩子漂浮（＃留在你的情況） –

169

Fiddle

嘗試進行系統是這樣，而不是：

HTML：

<section class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</section>

CSS：

.container { 
    width: 80%; 
    height: 200px; 
    background: aqua; 
    margin: auto; 
    padding: 10px; 
} 
.one { 
    width: 15%; 
    height: 200px; 
    background: red; 
    float: left; 
} 
.two { 
    margin-left: 15%; 
    height: 200px; 
    background: black; 
}

你只需要一個浮動DIV如果y在另一個上使用margin-left，等於第一個div的寬度。無論放大倍數如何，這都將起作用，並且不會出現子像素問題。

來源

2013-06-20 15:40:02 dezman

這不是幫助，縮放的東西現在是固定的，它說固定的，但正確的div現在滑落並固定在那個位置 – Waleed

你可能搞砸了一些東西，檢查你的代碼，或告訴我鏈接到jsFiddle和不好意思看它。 – dezman

aww男人，我很抱歉。 div已經被我給的上面的CSS固定了，它只是左邊和右邊的「box」div，填充和邊距爲％，因爲右邊的div很短，這就是爲什麼，它具有填充和邊距。對不起... – Waleed

這是很容易與Flexbox的：

#wrapper { 
    display: flex; 
} 
#left { 
    flex: 0 0 65%; 
} 
#right { 
    flex: 1; 
}

來源

2015-12-28 01:11:09

不錯，flexbox肯定是要走的路 –

根據這個網站，flex應該在94％的瀏覽器上工作。 http://caniuse.com/#search=flex – Adrian

@Adrian這是20人中有1人無法使用您的網站...這真的是一種選擇？ – JoostS

並列兩個div - 流體顯示

回答

相關問題