0

何らかの理由で、この画像は、インライン ブロックを表示するように設定されているにもかかわらず、残りのマークアップをコンテナー内で整列させないようにしています。

http://jsfiddle.net/ncQXD/

皆さんにとっては、シンプルなものであるべきです。私にとっては、この問題を解決するためにすでに何日も費やしてきました。

ちなみにフロートは使いたくないです。私は彼らの奇妙さを制御する方法を完全には知りませんし、それを学ぶ時間もありません。よろしければご利用いただけませんでしょうか。ただし、すべての事故などをカバーするコースに案内していただければ、山車の短期集中コースを受講できます。

今のところ、float 以外の CSS に固執する必要があります。

PS。境界線は「デバッグ」のためだけのものであり、実際には必要ありません

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
    <img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
    <a href="#" id="logo_txt">Title goes here</a>
    <span id="social_media">Social media links</span>
</div>
</body>
</html>

CSS:

#header {
    border: 1px solid red;

    width: 800px;
    height: 123px;
    margin: 0px auto;
    padding: 0px;

    background-color: rgb(181, 230, 29);
    }

#logo {
    border: 1px solid red;
    display: inline-block;

    width: 172px;
    height: 123px;
    }


#logo_txt {
    border: 1px solid black;
    display: inline-block;

    width: 100px;
    height: 123px;
    }
#social_media {
    border: 1px solid black;
    display: inline-block;

    width: 300px;
    height: 123px;
    text-align: right;
    }
4

4 に答える 4

2

これを修正する最も簡単な方法は、スタイルに追加vertical-align: topすることです。#logo

于 2012-06-07T03:37:47.590 に答える
1

追加

vertical-align:text-top;

あなたの画像スタイルにvertical-align:top;合わせて、それもうまくいくでしょうが、私はテキストに対して整列しているのでテキストトップを使用しました

デフォルトの垂直方向の配置はベースラインです。これにより、画像の下部が他のdivのテキストに配置されます。

フィドル

于 2012-06-07T03:41:52.837 に答える
1

こんにちはdisplay inline-block、1 つのプロパティを定義する以外の方法で使用した場合

vertical-align:top;

デフォルトでは、プロパティはプロパティをvertical-align:middle;定義するよりもそうであるためですverticle-align。

そして今、sam think in img tag cssでimg タグのプロパティを 定義します 。 verticel-align:top

于 2012-06-07T06:15:26.367 に答える
0

float左側の要素とすべてが機能します：http：//jsfiddle.net/ncQXD/1/

このCSSを追加しました：

#header > * {
    float: left;
}

#header {
    overflow: auto;
}​
于 2012-06-07T03:35:35.470 に答える