0

CSSに関しては私は初心者です。1行に3列のように表示したいHTMLコンテンツを使用しています。埋め込みスタイルの次のHTMLがあります。

<style type="text/css">
    #main {
        width: 100%;
        height: 250px;
    }

    #left-side {
        width: 20%;
        float: left;
        height: 100%;
    }

    #in-the-middle {
        width: 60%;
        text-align: center;
        display: inline-block;
        height: 100%;
    }

    #right-side {
        width: 20%;
        display: inline-block;
        height: 100%;
    }

</style>

<div id="main">

    <div id="left-side" align="left">
        Hello left
    </div>
    <div id="in-the-middle" align="center">
        Hello center
    </div>
    <div id="right-side">
        Hello right
    </div>
</div>

シンプルに見えますが、残念ながら「Helloright」のテキストがページの左側に表示されます。#right-sideの表示をインラインブロックに設定し、「Hello center」divの隣に表示されることを期待していますが、効果がないようです。誰かが私がここで欠けているものを見ることができますか？

4

4 に答える 4

0

要素はインラインでレンダリングされるため、HTMLコードの空白はレンダリングに影響します。の間に空白があるdivため、ブラウザはそれらの間に数ピクセルの空白をレンダリングします。

inline-blockなしで使用する場合、解決策は、次のように、各終了タグと開始タグfloatの間の空白を削除することです。</div><div>

<div id="left-side">
    Hello left
</div><div id="in-the-middle">
    Hello center
</div><div id="right-side">
    Hello right
</div>

ここで実写を参照してください：http：//jsfiddle.net/LbNGq/

于 2012-12-27T07:37:25.737 に答える
0

このcssスクリプトを試してください

<style type="text/css">
#main {
    width: 100%;
    height: 250px;
     display: inline-block;
}

#left-side {
    width: 20%;
    float: left;
    height: 100%;
}

#in-the-middle {
    width: 60%;
    text-align: center;
    display: inline-block;
    height: 100%;
    float:left;
}

#right-side {
    width: 20%;
    display: inline-block;
    height: 100%;
    float:left;
}

于 2012-12-27T07:38:10.713 に答える
0

float:left一緒に使うdisplay: inline-block

于 2012-12-27T07:34:20.390 に答える
0

右側の div 幅をわずかに小さくして使用すると、同じ列に表示されます

#right-side {
    width: 19%;
    display: inline-block;
    height: 100%;
}

デモを見る

于 2012-12-27T07:33:51.450 に答える