如何在一個div旁邊浮動兩個div？

我想在我的網頁下面類似的結構：如何在一個div旁邊浮動兩個div？

+---------------+ +-----------+ 
    |    | |   | 
    |    | | Div-B | 
    |    | |Float:left | 
    |    | |   | 
    |  Div-A  | |   | 
    | Float: left | +-----------+ 
    |    | +-----------+ 
    |    | | Div-C | 
    |    | |<marquee> | 
    |    | |</marquee> | 
    |    | +-----------+ 
    |    | 
    +---------------+

但我不能創造事業部-C像上面的風格。如果我給出Div-C的不同背景顏色，它將延伸到Div-A的左邊界。所以我不能在Div-A和Div-C之間留出空白。它正在變成這樣：

+---------------+ +-----------+ 
|    | |   | 
|    | | Div-B | 
|    | |Float:left | 
|    | |   | 
|  Div-A  | |   | 
| Float: left | +-----------+ 
|---------------|-+-----------+ 
|     Div-C | 
| (Background color fills  | 
|  this whole section | 
|---------------|-+-----------+ 
|    | 
+---------------+

另請注意，Div-C包含一個選取框。請給我解決方案。

來源

2013-07-07 stockBoi

關於與你寫必須說明具體問題和代碼問題，問題包括有效的代碼來重現它。請參閱SSCCE.org以獲取指導。 – hjpotter92

你爲什麼不使用這樣的事情：（working jsFiddle）

HTML：

<div id="mainContainer"> 
    <div id="divA"></div> 
    <div id="divB"></div> 
    <div id="divC"></div> 
</div>

CSS：

#mainContainer{ overflow:hidden; } 
#divA{ float:left; width:60%; } 
#divB{ float:right; width:30%; } 
#divC{ float:right; width:30%; }

來源

2013-07-07 15:19:33

2種方式成爲可能。

1）您可以使用CSS Positioning。覆蓋所有divs在母親div然後給母親div一個CSS position:relative;和所需的寬度和高度...然後所有兒童CSS position: absolute;然後DivA可以有CSS left:0px;然後DivB可以去CSS right:0px; top:0px;，然後DivC CSS right:0px bottom:0px;。給他們各自的寬度和顏色。實施例：

<style type="text/css"> 
.kids{position:absolute;} 
</style> 

<div id="mainContainer" style="width:300px; height:500px; background:#ccc; position:relative;"> 
    <div class="kids" id="divA" style="width:60%; height:100%; top:0px; left:0px; background:orange;">A</div> 
    <div class="kids" id="divB" style="width:60%; height:50%; top:0px; right:0px; background:green;">B</div> 
    <div class="kids" id="divC" style="width:60%; height:50%; bottom:0px; right:0px; background:red;">C</div> 
</div>

小提琴：http://jsfiddle.net/pgkWL/

2）創建<table>與1個整體柱和2個半列。將divs分別放在相應的列中。

<div id="aNewWrapper" style="width:300px; height:500px;"> 
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td width="50%" rowspan="2" height="500"><div id="divA" style="width:100%; height:100%; background:orange;">A</div></td> 

     <td width="50%" height="250"><div id="divB" style="width:100%; height:100%; background:green;">B</div></td> 
    </tr> 
    <tr> 
     <td height="250"><div id="divC" style="width:100%; height:100%; background:red;">C</div></td> 
    </tr> 
    </table> 
</div>

小提琴：http://jsfiddle.net/tWCBP/

來源

2013-07-07 16:19:32 ErickBest

這可能適用於您的兩種情況....只是適當地使用代碼 – ErickBest

如何在一個div旁邊浮動兩個div？

回答

相關問題