193
我想把兩個<div>彼此相鄰。正確的<div>約爲200px;而左邊的<div>必須填滿屏幕寬度的其餘部分？我怎樣才能做到這一點？CSS two divs each other
A
回答
356
您可以使用flexbox奠定了您的項目：
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>這基本上只是刮Flexbox的表面。 Flexbox可以做很棒的事情。
對於較舊的瀏覽器支持，可以使用CSS 浮動和寬度屬性來解決這個問題。
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
27
不幸的是，這對於一般情況來說並不是一件微不足道的事情。最簡單的事情就是添加一個css風格的屬性「float：right;」到200px div，但是，這也會導致你的「main」-div實際上是全寬，並且其中的任何文本都會圍繞200px-div的邊緣浮動，這通常看起來很奇怪，取決於內容（非常多在所有情況下，除非是浮動圖像）。
編輯： 正如Dom建議的那樣，包裹問題當然可以用餘量來解決。傻我。
+1
'float：left'會更合適，lft div需要跨越所有的左邊區域。沒有犯罪的意思，只是考慮。 – 2009-01-15 09:03:14
-1
套用我的其中一個網站，做類似的事情：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression((document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
18
通過@roe和@MohitNanda工作建議的方法，但如果有合適的DIV設置爲float:right;，那麼它必須在HTML源代碼中排在第一位。這打破了從左到右的閱讀順序，如果頁面在樣式關閉的情況下顯示，這可能會造成混淆。如果是這樣的話，它可能是更好地使用包裝的div和絕對定位：
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
證明：
左向右編輯：嗯，有趣。預覽窗口顯示格式正確的div，但渲染後的項目不顯示。對不起，你必須自己嘗試。
2
正如大家已經指出的那樣，您可以通過設置RHS內容的float:right;和LHS的負邊界來實現此目的。
但是..如果你不在LHS上使用float: left;（如Mohit所做的那樣），那麼你會得到一個階梯效應，因爲LHS div仍然會消耗佈局中的邊距空間。
但是，LHS float將收縮包裝內容，因此如果不可接受，您需要插入定義寬度的子節點，此時您可能已定義了父級的寬度。
但是......正如David指出的那樣，您可以更改標記的讀取順序以避免LHS浮動要求，但這具有可讀性和可能的可訪問性問題。
但是..這個問題是可以solved浮筒給出了一些額外的標記
（警告：我不贊成在這個例子中，.clearing股利，見here瞭解詳細信息）
所有的事情考慮，我想我們大多數人希望能有一個非貪婪寬度：留在CSS3 ...
6
div1 {
float: right;
}
div2 {
float: left;
}
這將工作，只要你設置clear: both OK用於分隔這兩個列塊的元素。
128
我不知道這是否仍是當前的問題，但我只是遇到了同樣的問題，並使用CSS display: inline-block;標籤。 將這些包裝在一個div中，以便它們可以被適當定位。
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
請注意，內聯樣式屬性的使用僅用於此示例的簡潔性，當然這些示例被用於移動到外部CSS文件。
-7
只是使用z-index，一切都會很好。確保將位置標記爲固定或絕對。那麼沒有什麼東西會像浮標一樣移動。
4
我遇到了同樣的問題和Mohits版本的作品。如果你想在html中保留你的左右順序，試試這個。在我的情況下，左邊的div是調整大小，右邊的div保持在寬度260px。
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
的技巧是使用一個右填充主框，但通過與容限再次將右邊的框中再次使用該空間對。
1
這不會是所有人的答案，因爲它在IE7中不受支持，但您可以使用它，然後爲IE7使用備用答案。它是display：table，display：table-row和display：table-cell。請注意，這不是使用表格進行佈局，而是使用div設置樣式，以便使事情與上面的所有麻煩很好地排列起來。 Mine是一個html5應用程序，所以它效果很好。
本文給出了一個例子：http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
這裏是你的樣式將是什麼樣子：
.container {
display: table;
width:100%;
}
.left-column {
display: table-cell;
}
.right-column {
display: table-cell;
width: 200px;
}
11
我今天就遇到了這個問題。基於上述解決方案，這對我有用：
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
只要使父div跨越全寬並浮動其中包含的div。
5
UPDATE
如果需要放置元素在一排，你可以使用Flex Layout。在這裏你有另一個Flex tutorial。這是一個很棒的CSS工具，即使它不是100％兼容的，它的每一天其support都會變得更好。這工作簡單：
HTML
<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>
CSS
.container {
display: flex;
width: 100%;
height: 200px;
}
.contentA {
flex: 1;
}
.contentB {
flex: 3;
}
而你在這裏買到是4個單位，總規模，這一比例與它的孩子們在空間的容器關係爲1/4和3/4。
我已經在CodePen中做了一個解決你的問題的例子。我希望它有幫助。
http://codepen.io/timbergus/pen/aOoQLR?editors=110
很老
或許這只是一句廢話，但你有沒有試着用一個表？它不直接使用CSS來定位div，但它工作正常。
您可以創建一個1x2的表格，並把你的divs裏面，然後格式化表CSS來把他們當成你想：
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
注意
如果你想避免使用該表如前所述，您可以使用float: left;和float: right;，並且在以下元素中，請不要忘記添加clear: left;,clear: right;或clear: both;以便清理位置。
1
我使用float和overflow-x的混合：hidden。最小的代碼，始終有效。
https://jsfiddle.net/9934sc4d/4/ - PLUS你不需要清理你的浮點數！
.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
相關問題
- 1. css stack divs each other
- 2. Absolute divs each other
- 3. CSS body and other divs not full full
- 4. Scroll autosize div between two divs
- 5. node.js async for each two arrays
- 6. Handlebars and MeteorJs for each other or number
- 7. Numpy slice 2D array with each two alternating elements
- 8. CSS Float 4 divs
- 9. CSS DIVs Break On Zoom
- 10. CSS Wrapping DIVS
- 11. CSS盒 - DIVS
- 12. css divs換行
- 13. CSS Tabbed Divs opacity
- 14. Css Divs溢出
- 15. CSS Divs定位
- 16. CSS Stacked divs
- 17. CSS Stacking Divs
- 18. layering divs and css
- 19. PHP count divs to change CSS
- 20. animatedcollapse moving other elements
- 21. XSL for-each filtering;如何在select中評估TWO變量？
- 22. HTML CSS DIVs安排
- 23. CSS divs不可見
- 24. divs的定位 - CSS
- 25. Css divs和h1 h2
- 26. Scale divs height pure CSS
- 27. DIVS，CSS和I幀
- 28. Jquery＆CSS - 重疊divs
- 29. CSS Floating Divs問題
- 30. div draw other div
這實際上是正確的答案，簡明扼要，而且與上面的兩個不同，它是完全獨立的。 SO的最佳答案應該就像這樣，IMO。 +1 – 2010-06-02 10:30:57
注意詳細說明爲什麼左側需要'浮動：左'？你對我的回答的評論說'lft div是所有左邊區域的跨度'，但是'float：left`會導致它緊緊包裹內容。 – falstro 2011-02-14 07:54:39
浮動使佈局最終炸燬，我建議不要使用它... – Smar 2011-08-17 09:18:11