CSS - 如何將一個元素浮動到其他div的右側？

我有一個div，在div裏面我有兩個較小的，其中一個是在左邊，另一個是在右邊，但父div的寬度沒有增加，我怎麼能這樣做它呢？CSS - 如何將一個元素浮動到其他div的右側？

我想要紅色的div得到一個更高的高度時div的內部變大。

<div class="wrap"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="footer"> 
    </div> 
</div>

.wrap{ 
    margin:auto; 
    width:960px; 
    min-height:50px; 
    background:red; 
} 

.left{ 
    width:450px; 
    height:100px; 
    background:blue; 
    float:left; 
} 

.right{ 
    width:450px; 
    height:100px; 
    background:green; 
    float:right; 
} 

.footer{ 
width:100%; 
height:100px; 
background:#000; 
}

Fiddle。

來源

2013-07-01 Michael

您可以將第二個div後添加：

<div style="clear: both;"></div>

或閱讀clearfix

來源

2013-07-01 08:29:55 GoldenTabby

添加以下規則到.wrap類overflow: auto;

FIDDLE

.wrap{ 
    margin:auto; 
    width:960px; 
    min-height:50px; 
    background:red; 
    overflow: auto; /* <-- here */ 
}

來源

2013-07-01 08:29:19 Danield

但是，如果我有一個頁腳或其他DIV下我仍然得到一個問題... – Michael

@邁克爾看看這個小提琴：http://jsfiddle.net/danield770/XXyXa/2/這就是你想？ – Danield

是的，它的工作很清楚：都是。 – Michael

.wrap:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}

來源

2013-07-01 08:35:18

我總是使用this site的CSS clearfix。這是解決這個問題最合適的方法。只需將.wrapper的class屬性設置爲「wrapper clearfix」

.clearfix:after { 
content: "."; 
display: block; 
clear: both; 
visibility: hidden; 
line-height: 0; 
height: 0; 
} 

.clearfix { 
display: inline-block; 
} 

html[xmlns] .clearfix { 
display: block; 
} 

* html .clearfix { 
height: 1%; 
}

來源

2013-07-01 08:36:31 Andri

將父div的高度設置爲繼承。在.wrap div的高度，現在將擴大根據裏面的內容：

.wrap 
{ 
margin:auto; 
width:960px; 
height:inherit; 
background-color:red; 
}

來源

2013-07-01 08:40:52 samrap

這裏是更新fiddle link與更新CSS。你只需要添加溢出：隱藏和高度：100％;在.wrap類中。

.wrap { 
    margin:auto; 
    width:960px; 
    min-height:50px; 
    background:red; 
    overflow: hidden; 
    height: 100%; 
}

來源

2013-07-01 08:44:10

現在，當你增加左或右div的高度時，主div高度也會增加。

.wrap { 
margin: auto; 
width: 960px; 
min-height: 50px; 
background: red; 
overflow: hidden; 
height: 100%; 
}

來源

2013-07-01 09:08:54 sneha

CSS - 如何將一個元素浮動到其他div的右側？

回答

相關問題