20

ランディング ページにあるインライン ブロック要素 (div) を作成する HTML と CSS があります。ただし、div 内に何らかのコンテンツ (順序付けされていないリスト) が含まれている場合にのみ、垂直方向に正しく配置されているように見えます。div にコンテンツがない場合、要素は押し下げられます。ここにjsfiddleがあります。これがコードです。3 番目の div ブロックが垂直方向に配置されていない理由を説明できる人はいますか?

編集:この問題の「修正」は、各 div がスタイリングで「vertical-align:top」を使用するようにすることであることに満足していますが、なぜこれを使用する必要があるのか​​ についてはまだ少し戸惑っていますまずはスタイリング。div 内のコンテンツに関係なく、div 要素は常に均等に配置されると思います。

<html>
  <head>
<style type="text/css">
    body {
        font-family: Helvetica;
    }

    h1 {
        margin: 0px;
        padding: 10px;
        font-weight: bold;
        border-bottom: 1px solid #aaaaaa;
        font-size: 12px;
    }

    a {
        text-decoration: none;
    }

    ul {
        padding-left: 20px;
    }

    li {
        list-style-type: none;
        font-size: 12px;
    }

    .landing-block {
        display: inline-block;
        background-color: #eeeeee;
        margin-right: 30px;
        width: 192px;
        height: 140px;
        border: 1px solid #aaaaaa;
        -moz-box-shadow: 3px 3px 5px #535353;
        -webkit-box-shadow: 3px 3px 5px #535353;
        box-shadow: 3px 3px 5px #535353;
    }

    .header {
        padding: 10px;
        background-color: red;
        border-bottom: 1px solid #aaaaaa;
        color: #ffffff;
    }

    a:hover {
        text-decoration:underline; 
    }

    h1 > a {
        color: #ffffff;
    }

    h1 > a:hover { 
        color:#ffffff;
    }

    li > a {
        color: #000000;
    }

    li > a:hover { 
        color: #000000;
    }
   </style>
    </head>
    <body>
    <div>
        <div class='landing-block'>
            <h1 style='background-color: #3991db;'>
                <a href='#'>COMPANIES</a>
            </h1>
            <ul>
                <li><a href='#'>Search Companies</a></li>
                <li><a href='#'>New Company</a></li>
            <ul>
        </div>
        <div class='landing-block'>
            <h1 style='background-color: #9139db;'>
                <a href='#'>PEOPLE</a>
            </h1>
            <ul>
                <li><a href='#'>Search People</a></li>
                <li><a href='#'>New Person</a></li>
            <ul>
        </div>
        <div class='landing-block'>
            <h1 style='background-color: #c2db39;'>
                <a href='#'>Products</a>
            </h1>
        </div>
    <div>
</body>
</html>
4

4 に答える 4

37

inline-block 要素はvertical-align:baseline;デフォルトです。これをに変更vertical-align:top;

 .landing-block {
        display: inline-block;
        background-color: #eeeeee;
        margin-right: 30px;
        width: 192px;
        height: 140px;
        border: 1px solid #aaaaaa;
        -moz-box-shadow: 3px 3px 5px #535353;
        -webkit-box-shadow: 3px 3px 5px #535353;
        box-shadow: 3px 3px 5px #535353;
        vertical-align:top; /* add this rule */

    }
于 2013-07-16T15:22:22.983 に答える
9

vertical-align:top; を追加します。.landing-block クラスへ

于 2013-07-16T15:21:51.123 に答える
-3

フロートを追加: 左

.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;

}

jsfiddle

于 2013-07-16T15:27:29.507 に答える