2

私は大きな画像といくつかのテキストを 2 つの列にレイアウトしたいと考えています。どちらも 50% 幅で、右側の列にテキストを、左側の列に画像を配置します。左側の列が右側のテキストから高さを取得し、画像の中心が垂直方向と水平方向の両方で左側の列の中心になるようにします。

だから、このようなもの：

[             ]|[----Text-----]
[             ]|[-------------]
[             ]|[-------------]
[    Image    ]|[-------------]
[    Centre   ]|[-------------]
[             ]|[-------------]
[             ]|[-------------]
[             ]|[-------------]

左側の列の高さを右側の列の高さと一致させるための標準的な方法は、コンテナ div を両方の列の周りに配置して、左側の列がその中の全高になるようにし、右側の列が上にくるようにすることです。左の。だから、このようなもの。

<div class="container">
    <div class="right-column">Lorem ipsum dolor sit...</div>
</div>

div.container {
    background-image: url(my_big_image.jpeg);
    background-position: ?;
    float: left;
    width: 100%;
}

div.right-column {
    float: right;
    background: white;
    width: 50%;
}

しかし、どうすれば画像の中心を左側の列の中心に合わせることができるでしょうか? 高さを正しくするには、コンテナー div に右の列を含める必要があるようですが、左の列の水平方向の中央に画像を配置するには、それを除外する必要があります。

理想的には、JavaScript を使用せずにこれを行いたいです。

4

2 に答える 2

2

あなたは確かにjQueryでこれを行うことができますが、ここにCSSのみのメソッドがあります：

デモ：http： //jsfiddle.net/skylar/zXqQB/

HTML：

<div id="container">
    <div id="text">
        <div id="image"></div>
        Lorem ipsum dolor sit amet..
    </div>
    <div class="clear"></div>
</div>

CSS：

#container { position:absolute; }
#image {
    position:absolute;
    left:0;
    width:50%;
    height:100%;
    background-color: #ccc;
    background-image: url(http://www.maniacworld.com/have-a-nice-day.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}
#text { margin-left:50%;}
.clear { clear:both; }
于 2011-08-23T20:45:56.190 に答える
1

2 つの列を同じサイズにする標準的なトリックは知っていますが、javascript (または私の場合は jQuery) を使用する別の方法を使用するのが好きです。これだけのために jQuery を使用するべきではありませんが、サイトに jQuery がある場合は、それを使用することもできます。また、3 番目の div も含まれます。

ライブデモ http://jsfiddle.net/ZH4mT/5/

blah( BG 画像の中央を水平方向と垂直方向に表示する領域にテキストを追加/削除します)

HTML

<div class="container">
    <div class="left-column"></div>
    <div class="right-column">blah blah blah blah blah ... blah blah blah</div>
</div>

CSS (背景色はデモ用です)

.container {
    float: left;
    width: 100%;
}

.left-column {
    float: left;
    background: #ff0 url(http://dummyimage.com/100x100/000/fff) no-repeat;
    background-position: 50% 50%;    
    width: 50%;
}

.right-column {

    float: right;
    background:#f00;
    width: 50%;
}

jQuery

var l = $('.left-column');
var r = $('.right-column');
if (l.height() < r.height())
    l.height(r.height());
else
    r.height(l.height());
于 2011-08-23T20:41:15.340 に答える