如果可用空間增加水平邊距

如果可用空間爲，我想添加40px的左邊距，。如果沒有足夠的父寬度，讓我們減少它。如果可用空間增加水平邊距

示例：如果父級寬度僅爲420px，則邊距應減小到20px。

如何做到這一點？

* {margin: 0; padding: 0;} #parent {resize: both; border: 2px solid; overflow:auto; width: 500px; } #margin { display: inline-block; background-color: blue; width: 40px; } #main { display: inline-block; background-color: red; width: 400px; }

<div id="parent"> <div id="margin"> </div> <div id="main"> </div> </div>

來源

2016-04-26 Basj

要確認：左邊距「邊距」最多隻能爲40像素，但如果父母太小而不能容納孩子*和*其邊距，那麼邊距應該減少，這是您希望實現的目標？ – Shaggy

@Shaggy：parent = 500 => 40 + 400. parent = 412 => 12 + 400. parent = 370 => 0 + 370. – Basj

「margin」是一個真實元素還是應該是未佔用空間？主內容是否有真實內容？如果內容不夠，是否應該小於400像素？ – FelipeAls

您可以使用media queries這一點。

@media screen and (max-width: 420px) { 
    #margin { width: 20px } 
}

https://jsfiddle.net/0evabfLa/

這裏是上面的代碼的一個動畫，改變背景到黃色時的裕度的變化。

來源

2016-04-26 09:59:37

由於父元素可手動調整大小，因此媒體查詢在此實例中不起作用。 – Shaggy

感謝您的回答！哦，真的，媒體查詢需要這個？沒有辦法簡單的CSS工具或'calc（...）'？ – Basj

我在Firefox和Chrome上的動畫效果並不一樣。當我調整父母的大小時，它不起作用。 – Basj

我終於找到了一個解決方案，使用calc(...)和max-width。

#parent {resize: both; border: 2px solid; overflow:auto; width: 500px; } 
 
#margin { max-width: 40px; width: calc(100% - 404px); display: inline-block; } 
 
#main { background-color: red; width: 400px; display: inline-block; }

<div id="parent"> 
 
<div id="margin">&nbsp;</div> 
 
<div id="main">&nbsp;</div> 
 
</div>

來源

2016-04-26 10:21:38 Basj

即使沒有4像素的空白和輪廓而不是父邊框，加上'#main {max -width：400px; }'它在400px以下不起作用：紅色元素在第二行。我想這是因爲calc（）有一個負面的計算值（如300px - 404px），但我可能是錯的。 – FelipeAls

這裏有示範情況下，Flexbox的解決方案：http://codepen.io/anon/pen/
相關CSS是：

.parent { 
    display: flex; 
} 
.margin { 
    min-width: 0; /* Necessary under 400px */ 
    max-width: 40px; 
    flex: 1 0 0; 
} 
.main { 
    width: 400px; 
}

保證金被允許成長爲40像素，但也必須設置爲0 （flex收縮從不下降到0我認爲最小寬度默認值是... auto，而不是0）

來源

2016-04-26 10:43:16 FelipeAls

如果可用空間增加水平邊距

回答

相關問題