Margin, вызывающий отзывчивый вопрос

Я тренируюсь с 3-мя коробками для разумной цели. Он отлично работает, что я хочу делать, когда у меня нет полей для коробки. Но когда я добавляю маржу, желаемого результата не происходит. Тогда я должен использовать процент, равный 45%. Если я хочу иметь два бокса рядом. Но разве нельзя использовать 50%, которые учитывают маржу?Margin, вызывающий отзывчивый вопрос

Вот мой код. Некоторое объяснение, если это возможно, будет очень оценено.

* { 
 
\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, то он будет получать, нанесенным на внешнюю часть дел. По этой причине вам нужно уменьшить ширину окна.

Если у вас есть 4 коробки в одной строке, вы можете распределить ширину 25% для всех , если вы хотите добавить маржу справа примерно на 1%, тогда вам нужно уменьшить 1% ширины каждого div.

источник

2016-06-25 05:45:39 Bhawna

Margin, вызывающий отзывчивый вопрос

ответ

Смежные вопросы