1

我想在我的网页中使用以下结构：

    +---------------+ +-----------+
    |               | |           |
    |               | |   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 包含一个选取框。请给我解决方案。

4

2 回答 2

3

你为什么不使用这样的东西：（工作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-07T15:19:33.090 回答
0

2种可能。

1）您可以使用 CSS 定位。覆盖你所有divs的母亲div然后给母亲div一个CSSposition:relative;和一个所需的宽度和高度......然后所有的儿童CSS然后DivAposition: absolute;可以有CSSleft:0px;然后DivB可以去一个CSSright: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-07T16:19:32.493 回答