了非常簡單的問題，對不起球員，但我試圖浮動一個DIV左和預定義的寬度一個正確沿着這些線路拆分頁面垂直使用CSS

<div style="width: 100%;"> 
    <div style="float:left; width: 80%"> 
    </div> 
    <div style="float:right;"> 
    </div> 
</div>

雖然這個「大多的作品似乎一團糟在其下面的頁面上添加其他元素。

那麼，爲什麼要使用CSS將HTML頁面垂直分割爲兩部分而不影響頁面上的其他元素，這是正確的？

來源

2012-07-26 Maxim Gershkovich

你可以使用..

<div style="width: 100%;"> 
    <div style="float:left; width: 80%"> 
    </div> 
    <div style="float:right;"> 
    </div> 
</div> 
<div style="clear:both"></div>

目前低於該元素將不會受到影響。

來源

2012-07-26 04:55:42

雖然這會起作用，但添加其唯一功能是「清除內容」的元素被認爲是不好的做法。 – 2012-07-26 05:00:32

那麼這些情況下的最佳做法是什麼？（我一直想知道如何避免「clearfix」divs） – 2013-02-05 16:32:25

如果我需要它們之間的界限怎麼辦？由於我不知道哪一個會一直變大，所以不能使用左右邊框。 – gcb 2013-03-23 06:12:54

只需添加溢出：auto;父DIV

<div style="width: 100%;overflow:auto;"> 
    <div style="float:left; width: 80%"> 
    </div> 
    <div style="float:right;"> 
    </div> 
</div>

Working Demo

來源

2012-07-26 04:55:15 bugwheels94

你只是把'height：400px;'放在兩邊。 – gcb 2013-03-23 06:11:58

我猜你的元素在頁面弄亂了，因爲你不清除出你的彩車，看看這個

Demo

HTML

<div class="wrap"> 
    <div class="floatleft"></div> 
    <div class="floatright"></div> 
    <div style="clear: both;"> 
</div>

CSS

.wrap { 
    width: 100%; 
} 

.floatleft { 
    float:left; 
    width: 80%; 
    background-color: #ff0000; 
    height: 400px; 
} 

.floatright { 
float: right; 
    background-color: #00ff00; 
    height: 400px; 
    width: 20%; 
}

來源

2012-07-26 04:57:34

也可以通過使float到left。

嘗試了這一點：

Working Demo

附：這僅僅是ANKIT的回答

來源

2012-12-21 17:39:15 Ankur

看看這個小提琴的改進：

http://jsfiddle.net/G6N5T/1574/

CSS/HTML代碼：

.wrap { 
 
    width: 100%; 
 
    overflow:auto; 
 
} 
 

 
.fleft { 
 
    float:left; 
 
    width: 33%; 
 
background:lightblue; 
 
    height: 400px; 
 
} 
 

 
.fcenter{ 
 
    float:left; 
 
    width: 33%; 
 
    background:lightgreen; 
 
    height:400px; 
 
    margin-left:0.25%; 
 
} 
 

 
.fright { 
 
float: right; 
 
    background:pink; 
 
    height: 400px; 
 
    width: 33.5%; 
 
    
 
}

<div class="wrap"> 
 
    <!--Updated on 10/8/2016; fixed center alignment percentage--> 
 
    <div class="fleft">Left</div> 
 
    <div class="fcenter">Center</div> 
 
    <div class="fright">Right</div> 
 
</div>

此我們es頁面上的div s左側，右側和中心對齊的CSS float屬性。

來源

2015-08-19 17:11:25 Stardust

這段代碼只是[這個JSFiddle（點擊我！）]的修改（http://jsfiddle.net/G6N5T/）。 – Stardust 2015-08-19 17:13:35

拆分頁面垂直使用CSS

回答

CSS/HTML代碼：

相關問題