在CSS中使用百分比邊距，但想要以像素爲單位的最小邊距？

我已經設置了margin: 0 33% 0 0;但是我還想確保保證金是至少某個px的金額。我知道CSS中沒有min-margin，所以我想知道我在這裏有什麼選擇嗎？在CSS中使用百分比邊距，但想要以像素爲單位的最小邊距？

2011-06-14 Brett

也許使用一個空的div在你設定的保證金的右邊？和設定寬度：33％; min-width：npx;那第二個div？這兩個元素包含在一個容器div中並浮動...不知道這是否會工作，但只是一個想法。 – 2011-06-14 22:11:12

謝謝你的想法AR。 – Brett 2011-06-14 22:38:06

將div與％width和一個靜態min-width放置在您的元素的右側。

<div style="position:relative; float:left; margin:0"> 
<div style="position:relative; float:left; width:33%; min-width:200px">

來源

2011-06-14 22:14:28 bogatyrjov

這種方法可以防止在父div內使用其他浮動元素和'clear'，因爲這會導致佈局被推到不需要的位置。對此的一個解決方法是在上面的父div上設置「overflow：hidden」，但這實際上並不是一個願望，並且會限制HTML工具提示等元素的使用，因爲這些元素可能會被非邊界框-overflowing divs。 – Kafoso 2015-02-18 18:26:13

你是否想爲第二個'div'使用'float：right'？ – 2017-09-17 03:26:26

這個怎麼樣？

body {margin-left: 60px; margin-right: 60px; } 
div#container {width:33%;}

來源

2011-06-22 23:29:05 GlennFriesen

好吧，如果你使用的是寬度爲100％的機身，這將是一個問題，因爲在X軸上會出現溢出。現在你可以做一個「oveflow-x：hidden」，但是這會導致調整大小的權利div的增加。整蠱！ – 2013-09-07 17:54:26

@CarlPapworth ...或使用[box-sizing：border-box;':) – Brett 2015-10-10 15:11:19

你可以試試這個

.mm:before { 
    content: ""; 
    display: inline-block; 
    width: 33%; 
    min-width: 200px; 
}

來源

2013-12-04 16:24:45 Ever

卡爾Papworth，在這種情況下，你可以使用這個：

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); } 
div#container {width:33%;}

來源

2015-10-09 18:15:05

這裏的真正解決方案是使用媒體查詢斷點以確定33％何時不再適合您，並且應該由像素中的最小邊距來覆蓋。

/*Margin by percentage:*/ 
div{ 
    margin: 0 33% 0 0; 
} 

/*Margin by pixel:*/ 
@media screen and (max-width: 200px){ 
    div{ 
     margin: 0 15px 0 0; 
    } 
}

在上面的代碼，改變max-width到任何屏幕寬度的33％右邊緣不再適合你。

來源

2016-01-22 22:51:09

如果您正在使用span比u必須這樣做：

span{ 
display:block; 
margin:auto; 
}

working demo

如果您正在使用div不是U可以這樣做：

div{ 
    margin:auto; 
}

來源

2016-03-22 16:58:05 Phoenix

我已經與上述幾種解決方案一起玩，但在流暢而真實的響應環境中，我相信最好的選擇是設置適當的paddi在相應的容器/包裝紙上。例如：風格：

html { 
    background-color: #fff; 
    padding: 0 4em; 
} 
body { 
    margin: 0 auto; 
    max-width: 42em; 
    background-color: #ddf; 
}

現在玩弄各種窗口寬度，也嘗試各種字體大小。

也請嘗試working demo。

來源

2016-09-29 15:46:46 untill

在CSS中使用百分比邊距，但想要以像素爲單位的最小邊距？

回答

相關問題