Html 无法使用 css 宽度属性设置 div 的像素宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4078329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot set pixel width of div using css width attibute
提问by paul
I'm trying to set up a div which contains 4 divs. I want to set the width of the container and some of the contained divs to set values but they just seem to take the width of the content.
我正在尝试设置一个包含 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>
The result looks like this:
结果如下所示：
+--+----+----+------------------------+---+
| |date|text| |twi|
+--+----+----+------------------------+---+
Can anyone explain why the left-hand divs are not being set to the required widths?
谁能解释为什么左边的 div 没有被设置为所需的宽度？
回答by Spudley
The reason you can't set the widths is because you are setting display:inline;.
您无法设置宽度的原因是因为您正在设置display:inline;.
When elements are displayed inline, they cannot have their dimensions specified because the size of the element is determined by the length of the text within it.
当元素内嵌显示时，无法指定它们的尺寸，因为元素的大小由其中的文本长度决定。
By default, <div>tags are set to display:block;. This mode can have its height and width specified, but defaults to being displayed below the preceding block.
默认情况下，<div>标签设置为display:block;。此模式可以指定其高度和宽度，但默认显示在前一个块下方。
There are two ways around this for you:
有两种方法可以解决这个问题：
Use
display:block;andfloat:left;-- This will change the blocks into floating elements, which means that subsequent elements will wrap around them. When used with other blocks, this effectively allows you to line them up. However usingfloatcan have other unexpected side-effects, due to the wrap-around effect I described.Use
display:inline-block;-- This is my preferred solution to this question.inline-blockis a half-way house mode betweenblockandinline. It allows an element to be treated as inline for the purposes of document flow, but still behave like a block internally, in that it will always be rectanguar and you are able to specify height and width, etc. It does have a few quirks (most notably poor support in IE6), but in general for what you're trying to achieve, it's a much cleaner solution and doesn't have the odd side-effects offloat.
使用
display:block;andfloat:left;-- 这会将块更改为浮动元素，这意味着后续元素将环绕它们。当与其他块一起使用时，这有效地允许您将它们对齐。然而float，由于我描述的环绕效应，使用可能会产生其他意想不到的副作用。使用
display:inline-block;——这是我对这个问题的首选解决方案。inline-block是block和之间的中途模式inline。它允许为了文档流的目的将元素视为内联元素，但在内部仍然表现得像块，因为它始终是矩形并且您可以指定高度和宽度等。它确实有一些怪癖（最明显的是在 IE6 中的支持很差），但总的来说，对于您想要实现的目标，它是一个更简洁的解决方案，并且没有float.
Hope that helps.
希望有帮助。
回答by heximal
i think it's because of display:inline style try this:
我认为这是因为 display:inline 风格试试这个：
<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>
回答by Kyle
Change your CSS as follows
更改您的 CSS 如下
.container div {
display: inline-block;
}
When you set the container div to inline, you actively set all of its children to inline as well, you may as well have just been using <span>s.
当您将容器 div 设置为内联时，您主动将其所有子项也设置为内联，您可能刚刚使用了<span>s。
Here is an example for you to see.
这里有一个例子供您查看。
回答by Hooray Im Helping
.container {
float: left;
width: 300px;
position: relative;
}
.container div {
float: left;
}
Should do the trick. Remove the inline display on the interior divs, and float all the divs left. Then you can specify the widths of the divs and any margins between them.
应该做的伎俩。移除内部 div 上的内联显示，并将所有 div 左浮动。然后您可以指定 div 的宽度以及它们之间的任何边距。
