-1

下の写真に示す要素を次のように整列させようとしています。スライドショーの画像を現在の場所に、タイトルのリンクを現在の場所に配置したいのですが、説明テキストをタイトルの下に配置し、スライドショーの画像の横に配置し、その後ろにdivスタックを配置しないようにします。

このアイテムがdivを背後にスタックさせないようにするために、スライドショー画像（緑色の境界線付き）に配置できる要素を知っている人はいますか？

以下のタイトルにはfloat：leftがあり、スライドショーの横に表示されますが、下の説明テキストにfloat：leftを付けると、タイトルの横に表示されます。

スクリーンショット

4

2 に答える 2

2

答えは、CSSの神々が、質問の最後の部分を入力しているときに非常に明白であると言ったように、ちょうど私に来ました。

画像の下にdivスタックを作成するには、「タイトル」divをコンテナの最後まで拡張する必要がありました。そのため、下の説明divは、画像の左側にフロートすると自動的にその下にスタックされます。

境界線でわかるように、説明divが自動的に次の行に移動するように、タイトルを十分に長くしました。Durrrr。誰かが気にかけているかどうかはわかりませんが、私はすべて準備ができているので、誰かがそれを検索して役立つと思うかもしれません。これはdrupalを使用したビューのスライドショーであったため、混乱する場合があります。

スクリーンショット

于 2012-08-30T18:24:59.987 に答える
0

タイトルに、小さなcssコードexを追加します。

.left {
float: left
}

明確なクラスも追加する

.clear {
clear: both
}

そしてあなたのhtmlコードで、これを使ってください

<img />
<h1 class="left">Title</h1>
<div class="clear"></div>
<p>Description</p>
于 2012-08-31T09:46:38.100 に答える