放置3個HTML div； 左1右2
[英]Place 3 HTML div; 1 left 2 right
問題描述
以下問題：
我有3個div。
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
我想按以下順序放置它們：
DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
........ DIV3
........ DIV3
........ DIV3
下方一格，右側二格。 當我給前兩個div賦予浮點數時：看起來像這樣：
DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
第3版
第3版
第3版
帶有“清除：左；浮動：右；” 在第三格我得到這個：
DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
..................................... DIV3
..................................... DIV3
..................................... DIV3
div 3位於頁面底部；
如何將最后一個div放在第二個div之下？
凱
5 個解決方案
解決方案1
2 已采納
更改您的標記。 將div1添加到一個元素，將div2和div3添加到另一元素：
<div class="left">
<div id="div1">
<p>DIV 1</p>
<p>DIV 1</p>
<p>DIV 1</p>
<p>DIV 1</p>
</div>
</div>
<div class="right">
<div id="div2">
<p>DIV 2</p>
<p>DIV 2</p>
<p>DIV 2</p>
<p>DIV 2</p>
</div>
<div id="div3">
<p>DIV 3</p>
<p>DIV 3</p>
<p>DIV 3</p>
<p>DIV 3</p>
</div>
</div>
然后左右浮動：
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
解決方案2
2 2013-05-27 09:26:37
試試這個jfiddle，其中包含float和div的2列http://jsfiddle.net/AnFPa/1/
<div style="float: left;">
<div>div1</div>
</div>
<div style="float: left;">
<div>div2</div>
<div>div3</div>
</div>
解決方案3
1 2013-05-27 09:09:00
嘗試使用clear left：
<div 3 style="clear:left" ></div>
或者您可以將兩個div都放在一個容器中，然后將右下方的一行浮動：
<div>
<div id="1" style="float:left"></div>
<div id="2" style="float:left"></div>
<div style="clear:both"></div>
<div id="3" style="float:right"></div>
</div>
解決方案4
1 2013-05-27 09:09:09
<div id="div4">
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
</div>
賦予div 4寬度，並向右浮動div 3。
解決方案5
0 2013-05-27 09:18:27
<html>
<body>
<div style="height: 100px; Width: 200px;"> <!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>
</body>
</html>
HTML，CSS在相對元素的左側而不是右側放置div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.