0

私はいくつかのdivを持っています

<div class="left">
  <h1>Title</h1>
  <p>Content</p>
</div>
...
<div class="left">
  <h1>Title</h1>
  <p>Content</p>
</div>

いくつかのタイトルは非常に長いです。クラスの背後にあるCSSは

.left {
    width: 32%;
    float: left;
    margin: 5px;
}

問題は、ユーザーがブラウザーのサイズを変更すると、長いタイトルの場合にコンテンツが押し下げられるため、短いタイトルの DIV と長いタイトルの DIV が 2 つ以上並んでいる場合、それらが並んでいないことです。上

H1タグのサイズを変更するか、コンテナを使用して何か他の方法でこれを回避する方法はありますか

ありがとう、

JJ

4

3 に答える 3

3

cssをこれに変更してみてください...

.left {
    width: 32%;
    float: left;
    margin: 5px;
    white-space: nowrap;
}

このnowrapプロパティは、収まるかどうかに関係なく、次の行へのテキストの折り返しを停止する必要があります。

于 2013-08-07T10:42:43.833 に答える
0

使用できます

@media screen and (max-width: 1024px)

たとえば、私はあなたを Jsfiddle にしました: http://jsfiddle.net/guillaumek/7vaEa/

于 2013-08-07T10:46:25.490 に答える
0

それと一緒に暮らすか、ページからデザインしてください。テキストはテキストであり、折り返す必要があります。メディア クエリを使用する場合、div をそれぞれの上に積み重ねることができ、「問題」はそれほど明白ではありません。または、あるコメンターが言うように、メディア クエリを使用してテキストを小さくします。これが役に立つかもしれません: http://css-tricks.com/css-media-queries/

于 2013-08-07T10:47:55.250 に答える