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に、DivA に CSS を指定し、DivB に CSS を指定し、次に DivC CSSposition: absolute;にそれぞれの幅を指定します。そして色。例：left:0px;right:0px; top:0px;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 に答える