我已經設置了margin: 0 33% 0 0;
但是我還想確保保證金是至少某個px
的金額。我知道CSS中沒有min-margin
,所以我想知道我在這裏有什麼選擇嗎?在CSS中使用百分比邊距,但想要以像素爲單位的最小邊距?
回答
將div
與%width
和一個靜態min-width
放置在您的元素的右側。
<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
這種方法可以防止在父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%;}
好吧,如果你使用的是寬度爲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;
}
卡爾Papworth,在這種情況下,你可以使用這個:
body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
這裏的真正解決方案是使用媒體查詢斷點以確定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%右邊緣不再適合你。
如果您正在使用span
比u必須這樣做:
span{
display:block;
margin:auto;
}
如果您正在使用div
不是U可以這樣做:
div{
margin:auto;
}
我已經與上述幾種解決方案一起玩,但在流暢而真實的響應環境中,我相信最好的選擇是設置適當的paddi在相應的容器/包裝紙上。例如: 風格:
html {
background-color: #fff;
padding: 0 4em;
}
body {
margin: 0 auto;
max-width: 42em;
background-color: #ddf;
}
現在玩弄各種窗口寬度,也嘗試各種字體大小。
也請嘗試working demo。
- 1. css的大小和邊距百分比
- 2. CSS使用百分比和邊距,填充或邊框
- 3. 邊框與百分比和邊距
- 4. CSS寬度和邊距百分比不像我想要的那樣
- 5. 垂直邊界的css最小邊距
- 6. 居中LinearLayout和「百分比」邊距
- 7. 等距元素是一個百分比,帶有填充/邊距
- 8. JQuery調整邊距 - 基於像素調整百分比寬度
- 9. 在寬度上正確使用邊距,百分比爲%
- 10. 我們可以在css中定義最小邊距和最大邊距,最大填充和最小填充?
- 11. CSS div邊距自動,無法在創建邊距中的位置元素
- 12. 如何讓div的下邊距等於百分比計算的右邊距?
- 13. CSS定位的負邊距
- 14. CSS定位邊距問題
- 15. CSS頁邊距百分比 - 跨瀏覽器問題
- 16. 如何用動態大小(百分比)管理邊框,填充,邊距?
- 17. CSS元素邊框包括邊距
- 18. CSS邊距
- 19. CSS邊距%'s
- 20. 在Opera中的CSS邊距
- 21. CSS表格單元格邊距,間距
- 22. 在CSS中的邊框邊距?
- 23. 邊距分辨率CSS
- 24. 如何使用寬度調整邊距和填充百分比?
- 25. 使用柔性單位作爲元素的邊距/填充?
- 26. 填充高度/邊距/邊框的百分比是否可以優於em?
- 27. 在寬度百分比中包含填充/邊距?
- 28. CSS使分頁鏈接200像素右邊的瀏覽器邊距
- 29. Bizzare行爲與CSS邊距
- 30. CSS最小高度添加到子元素的底部邊距
也許使用一個空的div在你設定的保證金的右邊?和設定寬度:33%; min-width:npx;那第二個div?這兩個元素包含在一個容器div中並浮動...不知道這是否會工作,但只是一個想法。 – 2011-06-14 22:11:12
謝謝你的想法AR。 – Brett 2011-06-14 22:38:06