製作2個div浮動：右下另一個

我不知道如何更好地表達我的標題，所以我會在這裏解釋。我有一個帶有3個div的HTML/CSS頁面。製作2個div浮動：右下另一個

第一個div.presentation沒有浮動規則。我想在右邊做菜單。

所以我得到了另外兩個div，div.login和div.categories。他們都有float: right;和clear: both;。

我想這樣的事情：

--------------------------------------  ------------------ 
|div.presentation      | |div.login   | 
|          | |     | 
|          | |     | 
|          | |     | 
|          | ------------------ 
|          | 
|          | ------------------ 
|          | |div.categories | 
|          | |     | 
|          | |     | 
|          | |     | 
--------------------------------------  ------------------

但div.login和div.categories是拋開對方。當div.categories不存在時，浮動規則可以很好地工作。

我有我想要的東西，當我把一個<div style="height:100px"></div>div.login和div.categories之間，但我敢肯定，我們可以做的更好。這是基於運氣。

這3個div是display:inline-block。

有什麼想法？非常感謝。

編輯http://jsfiddle.net/7nJp9/1/

來源

2013-07-27 Jason Pierna

爲什麼不只是把登錄和類別的div在一個div和浮動該div正確的？ – nocturns2

嘿傑森可以üPLZ分享您的Jsfiddle鏈接？ –

當我這樣做時，login和categories div重疊。 –

我已經修改您的CSS：

body { 
width: 90%; 
margin: auto; 
font-family: Arial, Verdana, sans-serif; 
font-size: 12px; 
background: #e6f0ff; 
} 

header.beta { 
position: absolute; 
top: 0; 
left: 0; 
width: auto; 
background: #fff7e0; 
opacity: 0.8; 
padding: 10px 50px; 
color: #444443; 
} 

header.logo { 
width: 90%; 
height: 125px; 
margin: auto; 
margin-top: 60px; 
margin-bottom: 30px; 
border: 1px dotted grey; 
} 

nav.tabs { 
display: none; 
} 
div.presentation, div.login, div.categories { 
position: relative; 
margin-top: 10px; 
display: inline-block; 
} 

div.right { 
position: relative; 
float: right; 
width: 25%; 
} 

div.presentation { 
width: 70%; 
clear: both; 
} 

div.login, div.categories { 
width: 100%; 
clear: both; 
} 

div.login header, div.presentation header, div.categories header { 
font-size: 14px; 
background: #0a97e2; 
padding: 3px 15px; 
color: white; 
border-radius: 10px 10px 0 0; 

} 

div.login section, div.presentation section, div.categories section { 
/*position: absolute;*/ 
width: 100%; 
background: white; 
border-radius: 0 0 5px 5px; 
} 

div.login section p, div.presentation section p { 
/* changed this */ 
margin: 0px 10px; 
padding: 3px 10px 3px 10px; 
} 

div.login section input { 
display: block; 
margin: auto; 
margin-bottom: 10px; 
} 

/* added this */ 
div.categories ul { 
margin: 0px 10px; 
padding: 3px 10px 3px 10px; 

}

來源

2013-07-27 20:27:38 nocturns2

哦，所以我需要刪除position：absolute並添加一個margin-top：O，非常感謝它！ –

HTML

<div class="left"> 
<div class="presentation"></div> 
</div> 
<div class="right"> 
<div class="login"></div> 
<div class="categories"></div> 
</div>

CSS

.left { 
    float: left; 
} 
.right { 
    float: right; 
}

來源

2013-07-27 19:58:55

即使沒有float：left也可以工作，但現在我的登錄和類別div垂直重疊！退房http://jsfiddle.net/7nJp9/1/ 感謝您試圖幫助 –

添加min-height：130px;以div.login和玩具的高度 –

我相信把你想要浮在某個地方的所有元素放在一個parrent元素是一個麪糊的解決方案，即你的溶劑。其他技巧基本上是黑客與C將最終打破CSS在某個時候，你不知道從哪裏開始尋找。 –

<div style="width:430px; height:430px; border:1px solid;"> 
    <div style="width:230px; height:100%; float:left; background:#000;"></div> 
    <div style="width:180px; float:right; height:150px; border:1px solid; margin-top:20px; margin-right:10px;"></div> 
    <div style="width:180px; float:right; height:150px; margin-top:20px; margin-right:10px; border:1px solid;"></div 
</div>

嘗試DIS一個

來源

2013-07-27 20:05:35

製作2個div浮動：右下另一個

回答

相關問題