无法使用css width attibute设置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>

display:inline; .

当元素以内联方式显示时,不能指定它们的维度,因为元素的大小由其中文本的长度决定。

默认情况下, <div> 标记设置为 display:block; . 此模式可以指定其高度和宽度,但默认显示在前面的块下面。

有两种方法可以帮你:

• 显示:块; float:left; --这会将块更改为浮动元素,这意味着后续元素将环绕它们。当与其他块一起使用时,这有效地允许您排列它们。但是使用 float 可能会有其他意想不到的副作用,由于我所描述的环绕效应。

• 使用 display:inline-block; --这是我对这个问题的首选解决办法。 inline-block 是介于 block 和 inline . 为了文档流的目的,它允许将一个元素作为内联元素处理,但在内部仍然像一个块,因为它始终是矩形的,并且您可以指定高度和宽度等。它确实有一些怪癖(在IE6中最明显的是不支持),但一般来说,对于您要实现的目标,这是一个更清洁的解决方案,没有奇怪的副作用 浮动 .

希望能有所帮助。

更改CSS如下

.container div {
    display: inline-block;
    }

<span> s。

这里有一个例子给你看。

http://jsfiddle.net/Kyle_Sevenoaks/ZwKDb/

.container {
  float: left;
  width: 300px;
  position: relative;
}

.container div {
  float: left;
}

应该会成功的。移除内部div上的内联显示,并将所有div向左浮动。然后可以指定div的宽度和它们之间的任何边距。