Question

我想用CSS归档这个img布局： http://666kb.com/i/czotlngmz2miu66q1.gif

1＆amp; 2＆amp; 3具有相同的高度911px
2必须居中并且固定宽度为800px
img 1＆amp;应拉伸3以填充左侧和右侧的剩余空间
imgs不应该相互叠加

我的HTML代码是一堆div标签，没什么特别的，所以我认为不需要发布它。

对我来说，这听起来像是一个简单的任务，但最终却浪费了20个小时并且没有存档。

有人有想法做到这一点吗？

EDIT1：所有人都要求代码，所以我会告诉你我刚刚想出的：

#page {
    display:table-row;
    height:911px
}

#logo {
    background:url(../images/logo.png) top center no-repeat;
    width:800px;
    height:293px;
    position:absolute
}

#side_L {
    display:table-cell;
    background:url(../images/bg_L.png) no-repeat right top / 100% 911px;
    min-width:50%;
    height:911px
}

#mid {
    display:table-cell;
    background:url(../images/main_bg.png) top center no-repeat;
    width:800px;
    height:911px;
    max-width:800px
}

#side_R {
    display:table-cell;
    background:url(../images/bg_R.png) no-repeat left top / 100% 911px;
    min-width:50%;
    height:911px
}

<div id="page">
        <div id="side_L"></div>

        <div id="mid">
            <div id="logo"></div>

            <div id="content"></div>

            <div id="foot"></div>
        </div>

        <div id="side_R"></div>
    </div>

问题在这里 - ＆gt;它有点工作，但我看起来很脏。有更好的解决方案吗？从现在开始的所有内容，如徽标，内容和脚和这样需要一个 - ＆gt; margin-top：-911px ... 这不是最好的方式。

Answer 1

模拟表是一种方法，但在这种情况下，您可以简单地将前两个div向左浮动，留下最后一个div占用剩余空间。诀窍是calc函数，用于在窗口中放置一个800px div时，左边div为剩余宽度的一半，因此右边的div将具有相同的宽度。

请注意，div的大小太大，无法正确显示在代码段窗口中，因此您必须全屏查看它的所有荣耀。
另请注意，我用背景颜色替换了背景图片（无法显示）。

＆＃13;

#side_L {
  float: left;
  background: #DFD;
  width: calc(50% - 400px);
  height: 911px;
}
#mid {
  background: #DFF;
  float: left;
  width: 800px;
  height: 911px;
  max-width: 800px;
}
#side_R {
  background: #DDF;
  height: 911px;
}

＆＃13;

<center>
  <div id="page">
    <div id="side_L"></div>
    <div id="mid">
      <div id="logo"></div>
      <div id="content"></div>
      <div id="foot"></div>
    </div>
    <div id="side_R"></div>
  </div>
</center>

＆＃13;

Answer 2

这个模板怎么样？

＆＃13;

$matches

＆＃13;

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav_left {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#nav_right {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float: right;
    padding:5px;	      
}
#section {
    width:800px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}

＆＃13;

CSS - 伸展方面的影响

2 个答案: