保證金導致響應問題

我正在練習3盒以達到響應目的。當我沒有包裝盒的邊距時，它的工作效果很好。但是當我增加保證金時，所需的結果不會發生。然後我必須使用45％的百分比如果我想要兩個並排的盒子。但是，是否有可能使用佔邊界的50％？保證金導致響應問題

這是我的代碼。如果可能的話，一些解釋將非常感謝。

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t background-color: lightblue; 
 
} 
 
.container { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
.box { 
 
\t width: 100%; 
 
\t height: 100px; 
 
} 
 
.blue { 
 
\t background-color: orange; 
 
\t width: 100% 
 
} 
 

 
.red { 
 
\t background-color: red; 
 
} 
 
.green { 
 
\t background-color: green; 
 
} 
 

 
@media screen and (min-width: 500px) { 
 
\t .blue { 
 
\t \t width: 50%; 
 
\t } 
 
\t .red { 
 
\t \t width: 50%; 
 
\t } 
 
\t 
 
} 
 

 
@media screen and (min-width: 700px) { 
 
\t .blue { 
 
\t \t width: 33%; 
 
\t } 
 
\t .red { 
 
\t \t width: 33%; 
 
\t } 
 
\t .green { 
 
\t \t width: 33%; 
 
\t } 
 
\t 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Testing</title> 
 
\t <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="box blue"></div> 
 
    <div class="box red"></div> 
 
    <div class="box green"></div> \t 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-06-25 special3220

是的，你可以使用百分比來分配間距。 – frnt

使用填充有箱式施膠，不使用保證金。使用此HTML：

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Testing</title> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="box blue"> 
     <div class="blue-bg"></div> 
     </div> 
     <div class="box red"> 
     <div class="red-bg"></div> 
     </div> 
     <div class="box green"> 
     <div class="green-bg"></div> 
     </div> 
    </div> 
    </body> 
    </html>

和CSS

* { 
    box-sizing: border-box; 
} 

body { 
    background-color: lightblue; 
} 
.container { 
    display: flex; 
    flex-wrap: wrap; 
} 
.box { 
    width: 100%; 
    min-height: 100px; 
    padding: 15px; 
    box-sizing: border-box; 
} 
.box > div{ 
    height:100px; 
} 
.blue { 
    width: 100% 
} 
.blue-bg{ 
    background-color: orange; 
} 

.red-bg { 
    background-color: red; 
} 
.green-bg { 
    background-color: green; 
} 

@media screen and (min-width: 500px) { 
    .blue { 
     width: 50%; 
    } 
    .red { 
     width: 50%; 
    } 

} 

@media screen and (min-width: 700px) { 
    .blue { 
     width: 33%; 
    } 
    .red { 
     width: 33%; 
    } 
    .green { 
     width: 33%; 
    }  
}

來源

2016-06-25 04:35:13

保證金屬性不是div元素的內部部分。但是，當您設置box-sizing: border-box時，邊框將成爲div元素的一部分。因此，您可以將border-width設置爲所需的百分比值，並將border-style設置爲solid和border-color以使背景顏色爲lightblue。

http://www.w3schools.com/css/css_boxmodel.asp

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t background-color: lightblue; 
 
} 
 
.container { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
.box { 
 
\t width: 100%; 
 
\t height: 100px; 
 
    border-width: 5%; 
 
    border-color: lightblue; 
 
    border-style: solid; 
 
} 
 
.blue { 
 
\t background-color: orange; 
 
\t width: 100% 
 
} 
 

 
.red { 
 
\t background-color: red; 
 
} 
 
.green { 
 
\t background-color: green; 
 
} 
 

 
@media screen and (min-width: 500px) { 
 
\t .blue { 
 
\t \t width: 50%; 
 
\t } 
 
\t .red { 
 
\t \t width: 50%; 
 
\t } 
 
\t 
 
} 
 

 
@media screen and (min-width: 700px) { 
 
\t .blue { 
 
\t \t width: 33%; 
 
\t } 
 
\t .red { 
 
\t \t width: 33%; 
 
\t } 
 
\t .green { 
 
\t \t width: 33%; 
 
\t } 
 
\t 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Testing</title> 
 
\t <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="box blue"></div> 
 
    <div class="box red"></div> 
 
    <div class="box green"></div> \t 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-06-25 04:35:21

當你在一個div然後將得到的div的外部施加的應用空間。因爲這個原因，你需要減小盒子的寬度。

如果你在一行中有4個盒子，你可以分配25％的寬度給所有的如果你想增加大約1％的餘量，那麼你需要減小每個div的1％的寬度。

來源

2016-06-25 05:45:39 Bhawna

保證金導致響應問題

回答

相關問題