1

ウィンドウの高さの 50% に本が表示され、次の本の 4 分の 1 が表示され、下にスクロールしたくなるような流動的なレイアウトを % で設計しようとしています。

ウィンドウのサイズを変更してもレイアウトは変更されないため、書籍の画像サイズ、余白などは % で指定する必要があります。

ただし、含まれている s の設定.books {position: absolute}ではdiv、含まれている画像のサイズはサムネイル サイズに縮小されますが、画像自体はかなり大きいです...

単位としての % はどのように機能しますか? 私は、100% は常にそれを含む要素の 100% であると考えました。なぜposition: absoluteこれを変更するのですか？

2 番目の質問は、% を使用している場合でも、ウィンドウの幅のみを変更すると垂直方向のレイアウトが変更されます。縦方向と横方向は独立していると思い込んでいました。

ここにいくつかのコードスニペットがあります。

<div id="container">
  <div class="books">
    <img src="..." />
  </div>
  <div class="books">
    <img src="..." />
  </div>
  <div class="books">
    <img src="..." />
  </div>
</div>

#container {
  height: 200%;
}
.books {
  height: 25%; /* =50% of window height */
}

編集: 犯人を見つけました: 上部の余白を % で割り当てましたが、すべて (上部、下部、左、右) の余白の値は親の幅の % として定義されています...奇妙なことです。

4

3 に答える 3

1

これをcssに追加します

.books img {width:100%; height:100%}
于 2012-09-05T07:27:29.190 に答える
0

htmlまでのすべての親の高さを指定する必要があります。

html, body{
    height: 100%;
}
#container {
    height: 200%;
}
.books{
    height: 25%; /* =50% of window height */
}
.books img{
    height: 100%;
}

position: absolute に変更すると、親は次の位置の親になり、position: relative (または position: absolute) にすることで指定できます。上記のコードは、ウィンドウのサイズを変更するとレイアウトが変更されることを意味します。しかし、チェーンのある時点で特定のサイズを設定したり、javascript で設定したりできますか?

于 2012-09-04T14:57:16.960 に答える
0

に関する質問に答えるにposition: absoluteは、要素は最初に配置された (静的ではない) 祖先要素に対して相対的に配置されるため、含まれている div の % 変更は画像サイズに影響します。出典：ここをクリック

経験上、% 幅と高さを使用するさまざまなブラウザーでいくつかの問題に遭遇することになります。サイズを固定し、検出された使用デバイスに基づいて複数のスタイル シートを提供することは、おそらくより良い方法です。

于 2012-09-04T14:27:07.673 に答える