0

私は3列のレイアウトを構築しました。中間コンテンツの画像の上にテキスト (見出し) を配置したいと思います。しかし、ブラウザ ウィンドウのサイズを変更するたびに、テキストが移動します。助言がありますか？私は、画像を絶対コンテナ（それ自体が相対的なもの）に配置しながら、要素を動かさずに絶対レイヤーを配置できると考えました。助言がありますか？

ここに jsfiddle があります: http://jsfiddle.net/Dkjsc/3/

更新: ミドルコンテンツから高さ属性を削除すると、すべて正常に機能します。しかし、これは行く方法ですか？

HTML:

<div id="content" class="content">

  <!--LEFT-->
   <div id="leftcontent" class="leftcontent">&nbsp;</div>

  <!--MIDDLE-->
  <div id="middlecontent" class="middlecontent">
     <div id="heading" class="heading">Text</div>
     <img src="images/Windows/Window_10.png" alt="" style="width:100%;">
  </div>

  <!--RIGHT-->
  <div id="rightcontent" class="rightcontent">&nbsp;</div>
</div>

CSS:

html, body {
 margin:0px;
 padding:0px;
 width:100%;
 height:100%;
}
.content {
 position:relative;
 width:100%;
 height:100%;
}

.leftcontent{
 position:absolute;
 width:20%;
 height:100%;
 left:0%;
}

.middlecontent {
 position:absolute;
 text-align:center;
 width:60%;
 height:100%;
 left:20%;
 top:10%;
 }

.rightcontent {
 position:absolute;
 width:20%;
 height:100%;
 right:0%;
}

.heading{
 position:absolute;
 text-align:center;
 width:100%;
 top:12%;
}
4

1 に答える 1

0

固定サイズの要素に相対的な位置を設定する必要があります。それ以外の場合は、サイズが変化し続けるウィンドウに相対的です。

于 2013-07-16T08:14:49.843 に答える