[解決済み] 画像をインラインで表示する方法

質問

私は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;
}

解決方法は？

まず、HTMLコードを修正する必要があります。

それは <div class = "title"> であって <div class = "title> タイトルの末尾の"が抜けている。

で、コンテナにfloatを追加し、幅を30%にします。なぜなら、画像の幅を30%にしたいからです。

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

3つのタイムコンテナを置いているので、100％×3が揃うようにお願いしているのです。

また、CSSにfloatを含む画像クラスを作成してください。

.image{
    float:left;
}

最後に、CSS で .image img の幅を 100% に変更すると、30% のコンテナの代わりに 100% の幅が使用されます。

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