0

レスポンシブ Web レイアウトを作成しようとしています。フロント ページには div があり、その中に 2 つの div があります。1 つはキャプション用、もう 1 つは画像用です。キャプションは常に画像の横にある必要がありますが、画像とキャプションは小さな画面に合わせて調整する必要があります。

これが私のhtmlです。

<div class="content">
        <div class="caption">
        <h1>Blablabla</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ipsum quam, semper volutpat massa. Cras mattis malesuada sagittis. Cras luctus erat quis orci condimentum quis vulputate lectus venenatis. Proin lorem lorem, vehicula in porta id, facilisis id massa. Phasellus venenatis eros et diam dictum faucibus. Donec at rutrum orci. Vivamus quam sapien, mollis sed aliquet blandit, viverra nec enim. In sapien lectus, fringilla pretium sollicitudin eu, eleifend id mi. Phasellus ullamcorper massa vitae mauris</p>
        </div>
        <div class="image">
            <img src="pics02.jpg">
        </div>
    </div>

これが私の CSS です。

    .content {
    margin: 0px auto;
    width:60%;
    background-color:black;
    margin-top:4em;
    display:block;
}

.caption {
    width:30%;
    background-color:white;
    height: auto;
    display:inline;
    margin:0px;
    color:green;
    float:left;
    padding:6px;
    display:block;
}

.image {
    display:inline;
    margin:0px;
    float:right;
    display:block;
}

.image img {
      max-width:100% !important;
    max-height:100% !important;
    display:block;
}

スタックに関する別のトピックでは、img タグに最大の幅と高さを設定し、ディスプレイをどこでもブロックするように設定する必要があることがわかりました。残念ながら、私がスケーリングしているときにはうまくいきません。スケーリングすると画像は小さくなりますが、キャプションの下にスライドします。

4

2 に答える 2

1

ライブデモ

複数の値に慣れているのはなぜですか

.caption {
    width:30%;
    background-color:white;
    height: auto;
    display:inline;   // used to any one value
    margin:0px;
    color:green;
    float:left;   // used to any one value
    padding:6px;
    display:block; // used to any one value
}

クラス内の 1 つのプロパティに使用.caption

に慣れてmultiple display valueいないsingle class

私はあなたがこのライブデモをしたいと思う

于 2013-04-12T11:41:16.190 に答える
1

これを画像CSSクラスに追加するだけです：

   .image {
    display:inline;
    margin:0px;
    float:right;
    display:block;
    width: 60%;
}

これがあなたが望むものであることを願っています。

それ以外の場合は、この例を実際の画像などで更新できる場合は、さらに多くのことを支援できます: http://jsfiddle.net/BJ8gK/30/

于 2013-04-12T11:44:33.480 に答える