代码之家 › 专栏 › 技术社区 › paul

无法使用css width attibute设置div的像素宽度

css html

paul · 技术社区 · 14 年前

<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没有设置为所需的宽度吗?

4 回复 | 直到 14 年前

heximal 14 年前

我认为这是因为显示:内联样式试试这个:

<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>

Spudley Pat 14 年前

display:inline; .

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

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

有两种方法可以帮你:

显示:块; float:left; --这会将块更改为浮动元素,这意味着后续元素将环绕它们。当与其他块一起使用时,这有效地允许您排列它们。但是使用 float 可能会有其他意想不到的副作用,由于我所描述的环绕效应。
使用 display:inline-block; --这是我对这个问题的首选解决办法。 inline-block 是介于 block 和 inline . 为了文档流的目的,它允许将一个元素作为内联元素处理,但在内部仍然像一个块,因为它始终是矩形的,并且您可以指定高度和宽度等。它确实有一些怪癖(在IE6中最明显的是不支持),但一般来说,对于您要实现的目标,这是一个更清洁的解决方案,没有奇怪的副作用 浮动 .

希望能有所帮助。

Kyle 14 年前

更改CSS如下

.container div {
    display: inline-block;
    }

<span> s。

这里有一个例子给你看。

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

Hooray Im Helping codaddict 14 年前

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

.container div {
  float: left;
}

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