1

このレイアウトを作成しようとしています。 流動的な画像レイアウト

IE 8 以降およびその他の標準的な Web ブラウザーからレイアウトにアクセスできるようにしたいと考えています。だから、できればCSS3は使いたくない。

これまでのところ、これを取得しました（ヘッダーとフッターは追加するのが原始的であるため、ヘッダーとフッターはありません）：

HTML:

<div class="right">
  <div class="left">
    <div class="container clearfix">
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    </div>
  </div>
</div>

CSS:

.right {background: url('images/bgr.jpg') no-repeat scroll right top #FFFFFF;}
.left {background: url('images/bgl.jpg') no-repeat scroll left top transparent;}
.container {width: 960px; margin: 0 auto; position: relative; text-align: left; border: 1px solid red;}
.clearfix:after {clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden;}

問題は、(pic1Width + pic2Width + contentWidth) よりも低い解像度で開くと、画像がコンテンツを覆い隠してしまうことです。また、写真 1 と 2 の左右に流体スペースを追加することもできません。

ヒントをありがとう！

4

3 に答える 3

2

中央のコンテンツが中央に固定されていると想定していますmargin:0, auto;

もしそうなら、私は

body
{ 
background-image:url('background.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

背景画像を作成して、a) 写真がコンテンツの両側に収まるようにし、b) エッジがフェードアウトして、背景色と一致する十分な色になるようにします (画面が広すぎる場合)。

それが役立つことを願っています。

于 2012-12-11T02:19:43.940 に答える
1

わかりましたので、実用的な解決策を見つけました。

<div class="container">
  <div class="container_center">
    <div class="left"></div>
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    <div class="right"></div>
  </div>
</div>

CSS:

.container {
   position: absolute;
   overflow: hidden;
   height: auto;
   width: 100%;
   top: 0px;
   z-index: 2500;
}

.container_center {
   position: relative;
   background-color: green;
   height: auto;
   width: 400px;
   margin:0 auto;
}

.left{
   position: absolute;
   background: #fff url('images/bgl.jpg') no-repeat 0 100%;
   height: 100%;
   width:100%;
   top: 0px;
   left: -100%;
}

.right {
   position: absolute;
   background: #fff url('images/bgr.jpg') no-repeat 0 100%;
   height: 100%;
   width:100%;
   top: 0px;
   left: 100%;
}

同様の問題のフィドルを確認できます: http://jsfiddle.net/pGYsL/

于 2012-12-11T12:43:12.343 に答える
0

私が質問を理解している限り、これはあなたが望むものであり、s<table>よりもa を使用して作成する方が簡単<div>です。

于 2012-12-11T02:13:15.947 に答える