Question

我写过代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<style type="text/css">
* {padding: 0px;margin: 0px;}
body {width:100%}
img.logo{display:block;width:80%;margin-left:10%;margin-right:10%;}
div.down{width:80%;margin-left:10%;margin-right:10%;height:auto;border:red solid 1px;overflow: auto}
.bar{width:10%; height:100%; float:left; display:block;}
.cent{width:80%; float:left;}

</style>
</head>
<body>
<img class="logo" src="logo.gif"/>
<div class="down">
<img class="bar" src="bar.jpg"/>
<div class="cent">
//LOT OF TEXT//


</div>
<img class="bar" src="bar.jpg"/>
</div>

</body>

</html>

当我将大量文本写入“cent”div时，“down”div会被拉伸。但是，尽管高度设置（100％或继承），“bar”图像不会调整大小，这应该从父级继承高度。我该怎么做才能让它发挥作用？

Answer 1

你这样做完全错了。您应该使用background-image来实现您想要的目标。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style type="text/css">
        .div1, .div2 {
            background: transparent url(bar.jpg) left repeat-y;
        } 
        .div2 {
            background-position: right;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
        </div>
    </div>
</body>
</html>

Answer 2

这是我在CSS高度

的站点参考上找到的

Site Point CSS Height Reference

该属性采用CSS长度（px， pt，em等），百分比，或者关键字汽车。负长度值是非法的。百分比值参考到元素的高度包含块。如果高度未指定包含块明确地（也就是说，它取决于内容高度）和这个元素不是绝对的定位，百分比值被视为自动。一个百分比值也被视为自动用于表格单元格，表格行和行组。特殊的汽车价值允许浏览器计算内容高度自动，基于其他因素。绝对的定位元素，例如，可以计算内容高度顶部和底部的基础属性值，或顶部和底部边距，边框和填充应用对元素。如果没有硬约束是由其他财产强加的元素被允许承担它 “天然”含量高度，在此基础上它的内容高度包含。

所以我做了如下。 HTML为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div id="container">
<img class="logo" src="logo.png"/>
<div class="down">
<img class="bar left" src="bar.jpg"/>
<div class="cent">

Lots of Text

</div>
<img class="bar right" src="bar.jpg"/>
</div>
</div>

</body>
</html>

CSS如下

html, body, div
{
padding: 0;
margin: 0;
}

div#container
{
width: 80%;
margin: 0 auto;
}

img.logo
{
display: block;
margin: 0 auto;
width: 100%;

}

div.down
{
position: relative;
border: 1px solid red;
overflow: auto;
}

img.bar.left
{
display: block;
width: 10%;
height: 100%;
border: 1px solid blue;
position: absolute;
top: 0;
left: 0;
}

img.bar.right
{
display: block;
width: 10%;
height: 100%;
border: 1px solid blue;
position: absolute;
top: 0;
right: 0;
}

div.cent
{
width: 80%;
border: 1px solid green;
margin: 0 auto;

}

现在，当内容的大小发生变化时，图像水平尺寸会发生变化。适用于IE9，FF4.01，GG11，AF5和Opera11

将浮动元素放入div中

2 个答案: