爲什麼包裝紙不能包裝在盒子裏？

我的代碼：

<style> 
    *{ 
     font-family:tahoma; 
    } 
    body{ 
     background:#333; 
    } 
    .wrapper 
    { 
     padding:10px; 
     background:white; 
     width:100%; 
    } 
    .box 
    { 
     margin-top:40px; 
     width:1100px; 
     height:400px; 
     background:#aaa; 
    } 
</style> 

<div class="wrapper"> 
    <div class="box"> 
     box 
    </div> 
</div>

該箱包含在包裝有一個固定的大小，這可能會溢出在小屏幕上的包裝。爲什麼包裝紙沒有包裝在盒子裏？我會怎麼做？

您還可以在this jsFiddle中查看問題。

來源

2016-07-05 Fuxi

怎麼樣最小寬度：100％;而不是寬度：100％？ – AlexisWbr

.box div的寬度應該總是恰好爲1100px，還是應該在較小的屏幕上縮小？ – j08691

@Fuxi查看我的答案。它會解決你的問題。 –

在包裝上使用display:inline-block來根據裏面的內容調整容器的大小。

來源

2016-07-05 14:50:00

爲了使這項工作：

刪除width: 100%，並加入到包裝display: inline-block。
這樣做，將使包裝具有儘可能多的寬度來包裝盒子。把width: 100%限制你的包裝到屏幕的寬度，並在箱子比屏幕大的情況下，它不會工作。
如果不希望有一個水平滾動條，尤其是在較窄的屏幕使用：box-sizing: border-box的包裝。

CSS：

.wrapper { 
    display: inline-block; /* Ensures that the box stays wrapped */ 
    padding: 10px; 
    background: white; 
    box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */ 
}

這是你的jsfiddle的working version，既修補了包裝問題，並廢除了水平滾動條。

僅供參考：

來源

2016-07-05 14:53:00

哇。很棒的水平滾動條:) – dippas

OP可能需要水平滾動條。 @dippas。沒有另行說明。 –

你真的想滾動移動？ – dippas

的div element默認有display:block;，所以你需要改變它的顯示器。

你應該從.wrapper類中刪除width:100%;，那麼你可以把它display:inline-block;或display:table;

*{ 
 
     font-family:tahoma; 
 
    } 
 
    body{ 
 
     background:#333; 
 
    } 
 
    .wrapper 
 
    { 
 
     padding:10px; 
 
     background:white; 
 
     display:inline-block; 
 
    } 
 
    .box 
 
    { 
 
     margin-top:40px; 
 
     width:1100px; 
 
     height:400px; 
 
     background:#aaa; 
 
    }

<div class="wrapper"> 
 
    <div class="box"> 
 
     box 
 
    </div> 
 
</div>

來源

2016-07-05 14:55:28

出現你的問題，因爲HTML文檔，默認情況下，顯示所有元素display: block。有兩種方法可以做到這一點，因爲我們的朋友之前提到過。

第一種是使用inline-block價值爲display屬性：

body{ 
    display: inline-block; 
}

第二種方法是使用max-width：

div.wrapper{ 
    max-width: 100%; 
    /*we have set height property to auto to have coefficient between width & height*/ 
    height: auto; 
}

欲瞭解更多信息，請訪問以下網頁：

inline-block

max-width

來源

2016-07-05 15:03:35 Diesel

您可以使用下面的CSS解決問題：

* { 
 
    font-family: tahoma; 
 
} 
 
body { 
 
    background: #333; 
 
} 
 
.wrapper { 
 
    padding: 10px; 
 
    background: white; 
 
    display: inline-block; 
 
} 
 
.box { 
 
    margin-top: 40px; 
 
    width: 1100px; 
 
    height: 400px; 
 
    background: #aaa; 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    box 
 
    </div> 
 
</div>

唯一的變化是我已經加入到display: inline-block元素.wrapper。

爲什麼包裝不圍繞孩子的div

問題包是所有的HTML元素都有它獲取瀏覽器應用了一些默認的CSS樣式。

在這種情況下，div獲得默認屬性display: block;這是相同的屬性，使默認的無風格的div佔用其父元素的完整可用寬度。

正如你可以用這個看到：snapshot of chrome dev tools

*紅色矩形突出的CSS樣式是由瀏覽器應用的默認樣式。

*紅色下劃線文字告訴我們元素的寬度。淡出表示該屬性的值由瀏覽器計算。

**雖然我們在此，但我想指出您可能遇到的以前的代碼所面臨的另一個問題，並且目標是讓wrapper始終包裝box。

如果.box div的寬度遠小於瀏覽器寬度的寬度，那麼可能會出現另一個問題，我在下面的代碼片段中顯示了這個問題。

 * { 
 
     font-family: tahoma; 
 
    } 
 
    
 
    body { 
 
     background: #333; 
 
    } 
 
    
 
    .wrapper { 
 
     padding: 10px; 
 
     background: white; 
 
    } 
 
    
 
    .box { 
 
     margin-top: 40px; 
 
     width: 100px; 
 
     height: 400px; 
 
     background: #aaa; 
 
    }

<div class="wrapper"> 
 
    <div class="box"> 
 
    box 
 
    </div> 
 
</div>

正如你可以看到box試圖抱住的wrapper側。

你可以閱讀更多關於display CSS屬性在這裏：CSS display property || CSS-Tricks

來源

2016-07-05 16:04:32

爲什麼包裝紙不能包裝在盒子裏？

回答

相關問題