CSS div width auto

div { 
    width: auto; 
}

你好，我有一個關於寬度的小問題！此代碼自動修復div的寬度，但是有沒有辦法給它加上10像素的上述自動寬度？我試圖width: auto + 10px，但沒有工作...CSS div width auto

來源

2017-03-05 darkchampionz

您可以添加填充：10px的 –

填充會做的工作 –

解決OP的問題：

div { 
    width: auto; 
    padding: 0 5px; /* This would add a padding of 5px to both the left and the right of the div content box, which gives an additional 10px to the total width of the element. */ 
}

這將做的工作

欲瞭解更多信息：Introduction to the CSS box model

編輯（寬度之差：100％，寬度：自動）

我對divs都使用相同的樣式，但您可以看到差異。

.main{ 
 
    margin:auto; 
 
    width: 70%; 
 
    height: 300px; 
 
    border: solid thin green; 
 
} 
 
.sub1{ 
 
    width: auto; 
 
    height: 50px; 
 
    margin: 20px; 
 
    padding: 20px; 
 
    color: white; 
 
    background-color: blue; 
 
    border: solid thin blue; 
 
} 
 
.sub2{ 
 
    width: 100%; 
 
    height: 50px; 
 
    margin: 20px; 
 
    padding: 20px; 
 
    color: white; 
 
    background-color: black; 
 
    border: solid thin black; 
 
}

<div class="main"> 
 
    <div class="sub1">I'm Div with auto width</div> 
 
    <div class="sub2">I'm Div with 100% width</div> 
 
</div>

來源

2017-03-05 09:04:01

這顯然增加了10px的 –

值自動設置值到父容器的100％。如果您想要100% + 10px與auto + 10px相同，請使用calc。

#parent{ 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#child{ 
 
    background-color: green; 
 
    width: calc(100% + 10px); 
 
    height: 50px; 
 
}

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <div id="parent"> 
 
    <div id="child"></div> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-03-05 09:09:33 Ahmad

'寬度：100％'=/='寬度：auto' –

所以如果有人使用自動他不能按照上面的代碼 –

自動計算的值是由瀏覽器。當您將div的寬度設置爲自動瀏覽器時，將其計算爲父寬度的100％。這是一個筆證明：http://codepen.io/kazx/pen/EWyejj – Ahmad

CSS div width auto

回答

相關問題