Question

我想在我的网页中找到类似结构的内容：

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

但是我不能像上面那样创造Div-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包含一个选框。请给我解决方案。

Answer 1

为什么不使用这样的东西：（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%; }

Answer 2

可能的两种方式。

1）您可以使用CSS定位。覆盖母亲divs中的所有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）创建一个{1}}，其中包含1个完整列和2个半列。将<table>放在相应的列中。

divs

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

如何在一个div旁边浮动两个div？

2 个答案: