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) 边缘淡化为足够纯色以匹配 bg 颜色（以防屏幕太宽）。

希望有帮助。

于 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

据我了解这个问题，这就是你想要的，使用 a<table>比<div>s 更容易创建。

于 2012-12-11T02:13:15.947 回答