3

3つの画像を含むナビゲーションdivがあります。各画像には、画像の下部に絶対的に配置されたタイトル要素があります。3つの画像すべてを同じ行に隣接して表示しようとしていますが、画像はブロックとして表示されます。

HTML：

<div class = "nav">
    <div class = "container">

        <div class = "image">
            <img src = "img1"> 
        </div>
        <div class = "title">
            <p> text1 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img2"> 
        </div>
        <div class = "title">
            <p> text2 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img3"> 
        </div>
        <div class = "title">
            <p> text3 </p>
        </div>

    </div>
</div>

CSS：

.nav {
    display: inline;
}

.container {
    position: relative;
    width: 100%;
}

.image img {
    width: 30%;
    height: 4.5in;
}

.title {
    width: 30%;
    position: absolute;
    bottom: 0; left: 0;
}
4

2 に答える 2

8

最初にHTMLコードを修正する必要があります。

各タイトルの最後にある「」が欠落しているわけでは<div class = "title">ありません。<div class = "title>

次に、フロートをコンテナに追加し、幅を30％にします。画像の幅を30％右にしたいからです。

.container {
    float:left;
    position: relative;
    width: 30%;
}

3つのタイムコンテナを配置すると、100％X3を整列させるように要求されます。

また、floatを含むCSSで画像クラスを作成します。

.image{
    float:left;
}

結論として、CSSの.image imgの幅を100％に変更すると、許可されている30％コンテナの100％の場所になります。

    .image img {
    width: 100%;
    height: 4.5in;
    }
于 2012-09-12T19:54:32.253 に答える
4

あなたの画像はすでにインラインに設定されています、問題は、彼らの親がそうではないということです。これが必要になります：

container { display: inline-block }

おそらく実際には必要のないマークアップがあることは注目に値します

    <div class = "title>
        <p> text3 </p>
    </div>

これで置き換えることができます：

    <h1 class="title">text3</h1>

またはこれ：

.container h1 {
    width: 30%;
    position: absolute;
    bottom: 0; left: 0;
}

-をちょきちょきと切る-

    <h1>text3</h1>
于 2012-09-12T19:34:11.243 に答える