我正在尝试设置一个包含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没有被设置为所需的宽度？
解决方法
我认为这是因为显示：内联样式
试试这个：
试试这个：
<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>