好的，我基本上是在构建一个流畅的布局。 我的 HTML 是这样的:
<div id="container">
<div class="box" id="left">Left</div>
<div class="box" id="center">This text is long and can get longer</div>
<div class="box" id="right">Right</div>
<div class="clear"></div>
</div>
这是CSS:
#container{
width: 100%;
}
.box{
float: left;
}
#left, #right{
width: 100px;
}
#center{
width: auto; /* ? */
overflow: hidden;
}
.clear{
clear:both;
}
我需要知道的是，当 #container 重新调整大小时，如何让 #center 重新调整大小，而不让元素在彼此下方移动。
最佳答案
尝试这些更正(只是简单的 float 元素，不需要设置绝对元素或填充)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fluid layout</title>
<style>
/*class to set the width of the columns */
.floatbox{
width:100px;
}
#container{
width: 100%;
float:left;
}
#left{
float:left;
}
#right{
float:right;
}
#center{
overflow: hidden;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<!-- floating column to the right, it must be placed BEFORE the left one -->
<div class="floatbox" id="right">Right</div>
<div class="floatbox" id="left">Left</div>
<!-- central column, it takes automatically the remaining width, no need to declare further css rules -->
<div id="center">This text is long and can get longer</div>
<!-- footer, beneath everything, css is ok -->
<div class="clear"></div>
</div>
</body>
</html>
关于html - CSS:根据 parent 的宽度调整div宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4439710/