CSS元素寬度問題

Question

創建div時，其寬度接近屏幕的90％，但我希望它的尺寸應盡可能小。 如何使用CSS修復？ 有任何想法嗎？

Answer 1

如果將div向左或向右浮動，並將其顯示為一個塊，那么它將僅是所需的寬度。

float: left;
display: block;

然后，您也可以給它一個寬度。 您之所以“接近90％”是因為默認情況下，元素上會有填充/邊距。

Answer 2

我們可以看到您的代碼嗎？ 如果要刪除div的塊質量，您要做的就是在該div上添加display:inline-block ，它應該只占用其攜帶的空間。

Answer 3

您可以在<div>上使用display: inline-block ，但是IE7和更早版本不支持該功能，但本機內聯對象除外。

Answer 4

任何元素的寬度將取決於其父元素（像素除外）的寬度。 可能是因為您在其每個父元素上設置了寬度，最終使您對子元素的框模型感到困惑。 如果未在子元素上指定寬度，則它將繼承其父元素的寬度。

例如：

標記代碼：

<html>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

CSS代碼：

body {
    width: 960px;
}
.outer {
    width: 75%;
}
.inner {
    width: 50%;
}

細節：

在上面的示例中，您可能認為<div class="inner">的寬度（50％）將根據<body>的寬度（960px）進行調整 。

但是，這不會發生，因為我們已經調整了其父元素： <div class="outer"> （75％） 。 所以真正發生的是<div class="inner">的寬度是根據<div class="outer">的寬度而不是<body>'s的寬度<body>'s 。

`<div class="inner">`的最終寬度計算：

<body> （960px） * <div class="outer"> * （0.75） = <div class="outer">的最終寬度（ 720px ）
<div class="outer"> （720px） * <div class="inner"> （0.50） = <div class="inner">的最終寬度（ 360px ）

CSS元素寬度問題

問題描述

4 個解決方案

解決方案1
3 2011-09-12 19:00:44

解決方案2
1 2011-09-12 19:02:40

解決方案3
0 2011-09-12 19:02:28

解決方案4
0

例如：

標記代碼：

CSS代碼：

細節：

`<div class="inner">`的最終寬度計算：

CSS元素寬度問題

問題描述

4 個解決方案

解決方案1 3 2011-09-12 19:00:44

解決方案2 1 2011-09-12 19:02:40

解決方案3 0 2011-09-12 19:02:28

解決方案4 0

例如：

標記代碼：

CSS代碼：

細節：

<div class="inner">的最終寬度計算：

解決方案1
3 2011-09-12 19:00:44

解決方案2
1 2011-09-12 19:02:40

解決方案3
0 2011-09-12 19:02:28

解決方案4
0

`<div class="inner">`的最終寬度計算：