0

私は3つのdivを持っており、すべて設定された高さと幅です。middelには余分な行がありますが、それでも親divの250px以内に十分収まっています。それでも、どちらかの側の2つのdivが少し下に移動します。誰かがなぜこれをしているのか説明して、私が今後理解できるようにすることができますか？

<div id="eventListBox">

    <div class="eventListItemBox"> 
        <img src="./icons/bluedude.png" />
        <h1>Test Item 1</h1>
        <h2>Jan 6th, 2012</h2>
        <h2>5/11</h2>
    </div>


    <div class="eventListItemBox"> 
        <img src="./icons/cookies.png" />
        <h1>Very long title to cause wrap on line</h1>
        <h2>Jan 15th, 2012</h2>
        <h2>2/9</h2>
    </div>


    <div class="eventListItemBox"> 
        <img src="./icons/cookies.png" />
        <h1>Test item 3</h1>
        <h2>Jan 15th, 2012</h2>
        <h2>2/9</h2>
    </div>


</div>

CSS：

#eventListBox{
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 150px;
    left: 75px;
    right: 75px;
    text-align: center;
    background-color: rgba(0,0,0,0.25);
}

.eventListItemBox{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 250px;
    height: 250px;
    background-color: rgba(0,0,0,0.25);
}

.eventListItemBox h1{
    margin: 0px;
    padding: 0px;
    font-size: 1.5em;
    font-weight: normal;
}

.eventListItemBox h2{
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
    font-weight: normal;
}

例

4

1 に答える 1

1

divがインラインで表示されているため、ボックスが均等に配置されていません。このため、プロパティを使用して、ラインボックス内で垂直方向に配置する方法を「指示」する必要がありvertical-alignます。デフォルトでは、すべてのインライン要素のvertical-align値はですbaseline。これが、右と左の両方のdivが下部に固定されている理由です。これを修正するには、すべてのdivを適切に配置するために、上部に固定するように指示する必要があります。これを行うには、デフォルトvertical-align値を上書きしてtop、次のように設定します。

CSS

.eventListItemBox {
    vertical-align:top;
}

この記事で、これが発生する理由（例を含む）に関するより詳細な説明を見つけることができます。

于 2012-12-17T03:30:00.160 に答える