1

使い方は以下の通りdisplay: inline-block; 

+----------+  heading text here
|  image   +  some paragraph text
+----------+

+----------+  heading text here
|  image   +  some paragraph text
+----------+

私が使用したhmtl...

<div class="videos">
  <div><img src=""><h3>heading text here</h3><p>some paragraph text</p></div>
  <div><img src=""><h3>heading text here</h3><p>some paragraph text</p></div>
</div>

私が使ったCSS...

.videos{
  display: inline-block; /* i have to use this as other elements to be inline-block */
}
.videos img{
  float: left;
}

私の問題の解決策は、「いくつかの段落テキスト」が画像の下に入らないようにすることです。またはそれを取得する方法はありますか？

編集

DEMO設定後も 2 番目の見出しとテキストが正しく表示される理由text-align: left !imortant;

4

5 に答える 5

1

別のフロートを使用するのではなく、フロートの横にコンテンツの列を配置する別の方法はoverflow: hidden(列は、コンテンツが画像よりも高い場合、このフロートの下に表示されないことを意味します)

作業フィドル: http://jsfiddle.net/kUdBm/

于 2013-04-21T15:33:33.857 に答える
0

あなたはそれを試しましたか：

.video p h3{
  float : right;
 }

それはうまくいくはずです。

于 2013-04-21T14:29:22.387 に答える
0

h3andpを div 内にラップできます。

<div class="right">
    <h3>heading text here</h3><p>some paragraph text</p>
</div>

次に、そのdivを画像の右側にフロートするだけです

div.right {
    float: right;
}

フィドル

この問題は、フロート要素がコンテナー ボックス内にある場合に発生します。その要素は、コンテナーの高さをフロート要素に合わせて自動的に調整しません。要素がフロートされると、フロートがフローから削除されるため、その親には要素が含まれなくなります。次の 2 つの方法を使用して修正できますclear: both。

<br style="clear:both" />

これは簡単で汚い解決策ですが、多くの欠点があるため、使用することはお勧めしません。よりエレガントで正しい方法は、clearfixこれを使用することです。これは、要素がそれ自体の後に自動的にクリアされるため、追加のマークアップを追加する必要がありません。通常、要素が水平方向に積み重ねられるようにフロートされるフロート レイアウトで使用されます。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: block;
}

インターネット上で多くのリソースを見つけることができますclearfix。これは、更新された質問に基づいて更新されたフィドルです。

于 2013-04-21T14:30:25.430 に答える
0

これがあなたのコードのデモです：

http://jsfiddle.net/bartekbielawa/cgWtH/

CSSコード

.videos{
  display: inline-block; /
}

.videos div {
    clear: both;
    margin: 20px 0;
    min-height: 60px;
}


.videos img {
  float: left;
  width: 100px; 
  margin-right: 10px;  
}

.videos div h3, videos div p {
    float: left;
}

.videos div h3 {
    margin: 0;
    padding: 0;
}
于 2013-04-21T14:33:33.470 に答える
-1

使用している H3 と p に幅を設定する必要があります。それ以外の場合、h3 と p が大きい場合は画像の下になります。

于 2013-04-21T14:25:41.563 に答える