如何在一个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？

回答

相关问题