5

この質問は以前にも同じように出てきましたが、私は周りを見回しましたが、これが他の人に起こっているのを見つけることができません。

HTMLで使用している画像と一緒に4x4グリッドのdivを作成できますが、テキストが必要なdivの1つ（右上）。そのdiv内に入る<p>Some text</p>と、左側のdivの下に移動し、下の2つはまだ整列されており、移動されたテキストdivの下にあります。

高さを固定してみましたが、何も変わりませんでした。divは上に移動しましたが、他は元の位置に留まりました。

CSS：

/* Page Content */

.container
    {width: 910px;
    height: auto;
    margin: 0px auto;
    padding-top: 35px;
    position: relative;}

/* Home Page Content */

.gridblock, .gridblock2, .gridtext
    {width: 450px;
    height: 200px;
    padding: 0px;
    position: relative;
    display: inline-block;}

.gridblock
    {margin: 2px;}

.gridblock2, .gridtext
    {margin: 3px, 0px, 3px, 0px;}

.gridtext
    {width: 450px;
    height: 200px;
    position: relative;
    background-color: #f9f9f9;}

HTML：

<div class="container">
    <div class="gridblock">
        <img src="images/homegrid1.jpg" alt="3345 Mastering">
    </div>
    <div class="gridtext">
        <p>Some Text</p>    
    </div>
    <div class="gridblock">
        <img src="images/homegrid2.jpg" alt="3345 Mastering">
    </div>
    <div class="gridblock2">
        <img src="images/homegrid3.jpg" alt="3345 Mastering">
    </div>
    <ul class="footer">
    </ul>

これはオンラインデモです：http：//jsfiddle.net/saidbakr/2LCwg/

4

1 に答える 1

2

私があなたの質問を正しく理解しているなら、問題はプロパティにあるようdisplay:inline-blockです。

クラスvertical-align:topに追加：.gridtext

.gridtext {
    vertical-align:top;
}

修正する必要があります。これが実用的なフィドルです。

そして、ここにdisplay：inline-blockプロパティに関する興味深い記事があります。

または、プロパティを削除してdisplay:inline-block（divはデフォルトでブロックとして表示されます）、代わりにfloatを指定することもできます。

.gridblock, .gridblock2, .gridtext {
    width: 450px;
    height: 200px;
    padding: 0;
    position: relative;
    float:left;
}

また、画像を操作しているときに、上記のクラスに追加overflow:hiddenして、それらの画像がコンテナから拡張されてグリッドを台無しにしないようにすることができます。

.gridblock, .gridblock2 {
    overflow:hidden;
}
于 2012-12-25T23:15:01.757 に答える