2

画像を右揃えにするグローバル要素を設定しました。

.containerright {
    float: right; margin: 5px 5px 5px 10px; position:relative;
}

画面がモバイルの縦長サイズに最小化されるまで、完全に機能します。次に、テキストの折り返しにより、いくつかの単語が残ります。

例えば：

<div class="containerright"><img src="/images/imageexample.jpg" width="223" height="160" hspace="0" vspace="5" alt="imageexample" border="0"></div>

<h2>Here is an example of heading text!</h2>

最小化すると、'Here is an example...' が画像の左上に配置され、文の残りの部分が '...of見出しテキスト!' に配置されます。画像の下にあるため、画像が右側に位置する大きなブレークがあります。

「@media (max-width: 320px)」を表示したときにスタックするようにクラスを設定するにはどうすればよいですか。表示ブロック; ???

助けてくれてありがとう！

4

2 に答える 2

1

メディア クエリの CSS で float を削除するだけです。:) 

@media (max-width: 320px) {
.containerright {
    float: right; /* remove the float on the mobile media query */
    margin: 5px 5px 5px 10px; 
    position:relative;
}
}

jsFiddleの例はこちら .. 画面のサイズを変更して、320px 未満のモバイルでどのように見えるかを確認します。

または、メディアクエリでオーバーライドすることもできます..

@media (max-width: 320px) {
.containerright {
    float:none;
}
}
于 2013-09-04T00:54:26.043 に答える
0 
@media (max-width: 320px) {
  .containerright {
    width: 100%;
  }
}
于 2013-09-04T01:30:30.063 に答える