0

次のようなレイアウトを構築する必要があります

+-------+-----------------------------+-------+
|       |                             |       |
|       |                             |       |
|   A   |             B               |   C   |
|       |                             |       |
|       |                             |       |
|       |                             |       |
+-------+-----------------------------+-------+

ゾーン内 AI は、右上に配置される画像を配置したいと考えています。ゾーン BI は画像を中央揃え (垂直および水平) に配置したい ゾーン CI は画像を左下に配置したい

次のマークアップがあります。

<div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="float: left;">
    [...]
</div>
<div style="float: right;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

CSS を使用しようとしましvertical-alignたが、機能しません。どうすれば欲しいものを手に入れることができますか? 助けてくれてありがとう

4

5 に答える 5

1

table-rowとを使用したソリューションtable-cellは、 を使用できるようにしますvertical-align。

適切な MDN を表示します。

HTML

<div class="area">
    <div style="width:250px;display:table-cell;text-align:right;">
        <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
    </div>
    <div class="slideshow" style="display:table-cell;width:500px;vertical-align:middle;text-align:center;">[...]
    </div>
    <div style="display:table-cell;width:250px;vertical-align:bottom;text-align:left;">
        <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
    </div>
</div>

CSS

.area{
    height:600px; /* some fixed height */
    display:table-row;
 }

div{
    border: 1px solid red;
}

JSFiddle .

表のセル幅も固定です。

于 2013-03-19T18:49:56.200 に答える
1

中央の列に画像を水平および垂直に配置する最良の方法は、背景画像を使用することです。

background:url(yourimage.gif) no-repeat center center;

絶対配置を使用して、画像を左右の列に配置します。

.leftcolumn { height:400px; width:100px; float:left; position:relative; border:1px solid blue; overflow:auto; }
.leftcolumn img { position:absolute; top:0px; right:0px; }
.rightcolumn { height:400px; width:100px; float:right; position:relative; border:1px solid red; overflow:auto; }
.rightcolumn img { position:absolute; bottom:0px; left:0px; }

HTML マークアップ:

<div class="leftcolumn">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" ></div>
<div class="rightcolumn">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

ここに.jsフィドルがあります

于 2013-03-19T18:40:18.537 に答える
1

レイアウトは流動的ですか？高さが違う？幅は高さほど扱いにくいものではありません

ゾーン A: 何もしません。画像はページの通常の流れでそこに移動します。

ゾーン B:
オプション 1) ボックスが固定サイズの場合: margin:100px auto 0 を使用します。ここで、100px は上部との差です
オプション 2) ボックスが流動的である場合: 絶対位置 + 負のマージン手法を使用します。この例では、画像は高さ 200 ピクセル、幅 300 ピクセルになるため、上マージンと左マージンは -0.5 * これらの寸法になります。

.slideshow { position:relative; }
.slideshow img { position:absolute; top:50%; left:50%; margin:-100px 0 0 -150px; }

ゾーン C:

div.zoneC { position:relative; }
div.zoneC img { position:absolute; right:0; bottom:0; }
于 2013-03-19T18:49:19.247 に答える
1 
    <div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="padding:25% 50%; ">
    [...]
</div>
<div style="float: right; margin-top: -51.5%;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

そして、理由は聞かないでください 51.5% - かなりうまく動作します (Chrome で確認)。理由 - 私は自分自身を知りません)

于 2013-03-19T18:37:22.340 に答える
0

テーブル レイアウトを使用できます。

HTML:

<div class="wrapper">
    <div class="a">A section</div>
    <div class="b">B section</div>
    <div class="c">C section</div>
</div>

CSS:

.wrapper {
    display: table;
    width: 100%;
}

.a,
.b,
.c {
    display: table-cell;
}

.a,
.c {
    width: [what you want];
}
于 2013-03-19T18:35:31.497 に答える