我正在尝试设置一个包含4个div的div。我想设置容器的宽度和某些所包含的div来设置值，但是它们似乎只是占用了内容的宽度。
<html>
<head>
<style>
div {
border: 1px solid #888;
}
.container {
width: 300px;
position: relative;
}
.container div {
display: inline;
}
.div1 {
width: 20px;
overflow: hidden;
}
.div2 {
width: 80px;
overflow: hidden;
}
.div3 {
width: 160px;
overflow: hidden;
}
.div4 {
width: 20px;
overflow: hidden;
position: absolute;
top:0px;
right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"><img src="1x1.gif" width="1" height="1"/></div>
<div class="div2"><span>date</span></div>
<div class="div3"><span>text</span></div>
<div class="div4"><span>twistie</span></div>
</div>
</body>
</html>
结果看起来像这样:
+--+----+----+------------------------+---+
| |date|text| |twi|
+--+----+----+------------------------+---+
谁能解释为什么未将左div设置为所需的宽度？
最佳答案
我认为是因为display:inline style
试试这个:
<div style='width:100px;overflow:hidden;'>
<div style='float:left;width:20px'></div>
<div style='float:left;width:20px'></div>
<div style='float:left;width:20px'></div>
<div style='clear:both;'></div>
</div>
关于html - 无法使用CSS宽度属性设置div的像素宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4078329/