17

我已经用这个代码玩了将近半天，最后我决定把它传给你。我想将三个div元素彼此相邻放置，左右元素围绕主要元素。我希望两个外部 div 都只包含一个背景图像，因此与中间的高度相同div。我一直在使用其他类似帖子的解决方案，但我所有的尝试都没有成功。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>  
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
    <div id="right"></div>
</div>
</body>

CSS：

body {
    text-align: center;
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
}

div#right {
    margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
}
p {
    font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
    margin: 20px 0px;
}

在此先感谢您的帮助。

4

3 回答 3

27

您需要添加height: 100%到您的body和html标签，以及您的 div 类：

html {
    height: 100%; /* <------------ */
}

body {
    text-align: center;
    height: 100%; /* <------------ */
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
    height: 100%; /* <------------ */
}

div#right {
    margin: 0px auto;
    width: 5px;
    float: left;
    border: 1px solid blue;
    height: 100%; /* <------------ */
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
    height: 100%; /* <------------ */
}
于 2012-11-28T21:36:42.197 回答
4

我知道这并不能真正回答您的问题，但我倾向于使用position:relative在父元素和position:absolute封顶元素上使用的方法。这保证了动态变化的框不会影响您的布局。由于语义原因，我也喜欢使用 :before :after 属性（IE 8+），但您可以使用子元素。效果一样好。我还加入了 box-sizing （FF 需要 -moz 语法），所以边框看起来不丑。（在生产环境中可能没有必要，因为您将使用背景）。

现在，代码！

CSS

div#container:before {
    content:"";
    width: 5px;
    border: 1px solid red;
    display: block;
    position:absolute;
    height:100%;
    left:0px;
    top:0px;
    box-sizing:border-box; /* careful... FF needs -moz if you need that compatibility */
}

div#container:after {
    content:"";
    width: 5px;
    border: 1px solid blue;
    display: block;
    position:absolute;
    height:100%;
    right:0px;
    top:0px;
    box-sizing:border-box;
}

HTML

<div id="container">
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
</div>

演示

http://jsfiddle.net/f7yL6/
http://jsfiddle.net/f7yL6/show

于 2012-11-28T21:47:14.033 回答
0

媒体查询可用于实现 % 提供的大部分功能，而不会带来任何痛苦。它不是那么流畅，但是当用于介绍横幅时，它是完全可以接受的。

首先使用移动声明，你会使用这样的东西。

.banner { height: 200px; }

@media all and (min-width: 500px) {
  .banner { height: 400px; }
}

@media all and (min-width: 1000px) {
  .banner { height: 500px; }
}

编辑：我使用了 min-width 但 min-height 也可以使用。为了真正让所有设备上的东西看起来都很好，需要混合使用 min-width 和 min-height 。

于 2013-05-29T09:02:20.830 回答