無法使用CSS寬度屬性設置div的像素寬度

我試圖設置一個包含4個div的div。我想設置容器的寬度和一些包含的div來設置值，但它們似乎只佔用內容的寬度。無法使用CSS寬度屬性設置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沒有被設置爲所需的寬度？

來源

2010-11-02 paul

這是否意味着列標題？看起來像一張桌子可能更合適。 – meagar 2010-11-02 13:54:26

不是列標題。不想使用表格，因爲樣式*可能會顯着改變... – paul 2010-11-02 13:59:57

我想這是因爲顯示：內嵌樣式試試這個：

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

來源

2010-11-02 13:56:11 heximal

+1這似乎已經成功了！解釋任何人;-) – paul 2010-11-02 14:00:38

行內元素不使用您指定的任何寬度或高度。 – 2011-04-19 07:22:11

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

.container div { 
    float: left; 
}

應該做的伎倆。刪除內部div上的內聯顯示，並將所有div都留下。然後你可以指定div的寬度和它們之間的任何邊距。

來源

2010-11-02 13:58:10

更改CSS如下

.container div { 
    display: inline-block; 
    }

當您設置div容器內聯，您主動設置其所有子內聯，以及，你可能也已經剛剛使用<span>秒。

以下是您可以看到的示例。

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

來源

2010-11-02 14:00:05 Kyle

不能設置寬度的原因是因爲你設置display:inline;。

當元素以內聯方式顯示時，它們不能指定尺寸，因爲元素的大小由其中的文本長度決定。

默認情況下，<div>標籤設置爲display:block;。此模式可以指定其高度和寬度，但默認顯示在前面的塊下方。

周圍有此兩種方式供您：

使用display:block;和float:left; - 這將改變塊成浮動元素，這意味着後續元素將包裝他們周圍。當與其他塊一起使用時，這可以有效地讓你排列它們。但由於我描述的環繞效應，使用float可能會產生其他意想不到的副作用。
使用display:inline-block; - 這是我對此問題的首選解決方案。 inline-block是block和inline之間的中途住宅模式。它允許將一個元素作爲內聯處理用於文檔流，但仍然在內部表現爲塊，因爲它始終是矩形的，並且您可以指定高度和寬度等。它確實有一些怪癖（在IE6中最顯着的支持不足），但總的來說，對於你想要實現的目標，這是一個更清潔的解決方案，並且沒有float的奇怪副作用。

希望有所幫助。

來源

2010-11-02 14:23:27 Spudley

無法使用CSS寬度屬性設置div的像素寬度

回答

相關問題