2

私はスケルトンを使用しています。これが私が望むレスポンシブレイアウトです:

モバイル レイアウト - タイトル、画像、説明のすべてが 1 つの列スタックに

デスクトップ レイアウト - 画像の右側にあるタイトルと説明

モバイルとデスクトップのレイアウト

css とメディア クエリのみを使用してレスポンシブ レイアウトを変更できるように、html と css をどのように構成すればよいですか? デスクトップ レイアウトでは画像を左にフロートさせ、モバイル レイアウトではタイトルをブロック要素にしてみました。

<div class="container">
<span class="date">10/1/2012</span>
<span class="title">title</span>
<img class="thumbnail" src="http://www.placehold.it/300x200">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisl urna, posuere et tincidunt id, malesuada id libero. Sed vel neque tellus. Nulla et justo eu sapien accumsan eleifend eget id enim. Suspendisse sagittis, erat in mattis sagittis, dolor leo molestie nisi, eget cursus massa est at erat.
</p>
</div>​​​​​​​​​​​​​​

モバイル CSS

.title {
     display:block;
}

​.thumbnail {
}

.conatainer {
 width:320px;
}

デスクトップ CSS

​.title {
     position:relative;
}

​.thumbnail {
    float:left;
}

.conatainer {
 width:960px;
}

これは、テキストが十分に長い場合、右側の列に保持するのではなく、説明が写真の下部にある写真の下に折り返されることを除いて、ほとんどの場合うまくいくようです.

スケルトンまたはレスポンシブ グリッド システムのいずれかを使用している場合、これを行うにはどうすればよいですか?それらの列クラスを使用する必要がありますか?

4

1 に答える 1

0

スタイルシートの段落にfloat: leftも設定できます。これにより、段落が独自の「列」に展開されます。.descriptiondesktop.css

.container次に、要素にもクリアを適用することを忘れないでください

于 2012-10-01T12:12:13.943 に答える