1

インラインブロックをクリアするにはどうすればよいですか?

これが私のhtmlです：

<p>Text 1</p>
<p>Text 2</p>
<p class="third">Text 3</p>
<p>Text 4</p>

私のcssは、各pタグをインラインブロックにします。これは、レイアウト、スタイリング、マージン、およびパディングの目的で使用されます。

レスポンシブ レイアウトの場合、テキスト 3 をクリアして次の行に移動し、テキスト 4 をそれに合わせる必要があります。だから私はこれを持っていた前に：

テキスト 1 テキスト 2 テキスト 3 テキスト 4

しかし今、私はこれが必要です:

テキスト 1 テキスト 2

テキスト 3 テキスト 4

更新 - 余分な HTML マークアップを追加しないソリューションはありますか?

4

4 に答える 4

4

HTMLを混乱させることなく、別のアプローチ：

@media screen and (min-width: 0px) {
  p {
    float: left;
    width: 50%;
  }
  p:nth-child(even) {
    clear: right;
  }
}

@media screen and (min-width: 400px) {
  p {
    float: none;
    width: auto;
  }
}

例: http://jsbin.com/ALAYAlo/1/edit (出力ウィンドウのサイズを変更)

スクリーンショット: http://i.imgur.com/CFNyrom.png

于 2013-09-06T10:28:43.887 に答える
2

float: left;それよりも使用するdisplay: inline-block;と、簡単にクリアできます.third

デモ

于 2013-09-06T10:13:10.283 に答える
0

このcssを使用できます。

   p{
    float:left;
    margin-right:3%   /*For spacing on between paragraph*/
}
.third{
    clear:left;
}
于 2013-09-06T10:07:22.970 に答える
0

以下を使用できます。

<p>Text 1</p>
<p>Text 2</p>
<div class="clear"></div>
<p>Text 3</p>
<p>Text 4</p>

CSS で:

.clear{
   clear: both;
}
于 2013-09-06T10:04:59.297 に答える