4

HTML 要素を一方向だけに塗りつぶしたい場合はどうすればよいですか? 通常、 width:100% はページ全体を埋めるだけなので、要素を一方向に終了させ、他の方向には終わらないようにしたい場合はどうでしょう。私が言いたいことを説明するために小さな例を作りました。

ここでそれらを共有してより便利にするために、いくつかの方法を考えようとしましたが、とにかくこれを行う方法を思いつきませんでした.

ここに画像の説明を入力

4

1 に答える 1

0

このようなものは何か用途がありますか？

.funny-box{
  width: 100%;
  position: relative;
  right: 80%;
 }

または、ページの同じ行にもっと表示したい場合。

<div class="special-row">
  <div class="funny-box"></div>
  <div class="regular-box"></div>
</div>

.special-row{
  position: relative;
}

.funny-box{
  width: 100%; /** or any width you want, but it needs a width **/
  position: absolute;
  right: 80%;
}
.regular-box{
  margin-left: 20%; /* flow normally, leave room for .funny-box */
}

覚えておくべき重要なことは、.funny-boxには明示的な幅が必要になるということです。必要に応じて、javascriptを使用して、少なくともウィンドウの左端に到達することを常に確認できます。

jQuery（他のライブラリ、およびライブラリを使用しないオプションが利用可能）では、次のようなことができます。

$('.funny-box').width($(window).width());

これは、ボックスが常にウィンドウの幅であることを意味します。そのため、提案した方法でボックスを配置すると、ボックスは常にウィンドウの左側を超えます。Jonが正しく指摘しているように、cssには「永遠に」というものはありませんが、この方法を使用すると、ユーザーに永遠に続くという印象を与えることができます。

.funny-box内の内側のdivをお勧めします。右にフロートしてクリアするので、コンテンツは常に画面に表示されます。

于 2013-03-12T11:01:12.580 に答える