Я хочу иметь три разных макета моей веб-страницы для разных ширины браузера (например, рабочий стол, планшет, телефон). В макете планшета (между 768px и 991px браузера) у меня должно быть три элемента: два в первой строке (таким образом, каждый из них занимает 6/12 ширины браузера), а третий - во второй строке (с 12/12 ширины браузера). Это то, что я хочу: What I want - IMAGE Но у меня проблема с этим расположением: Я не могу установить границы третьего элемента, выровненные с левой и правой границами первого и второго элементов, как вы видите. Это что я сделал: What I have - IMAGE Вы можете мне помочь? Примечание: Я хочу, чтобы элемент «3» был шириной «1» + «2» только для планшетов планшетов! Для других макетов я хочу то, что я уже сделал, т.е. такую же ширину для каждого элемента (1,2 или 3).Как горизонтально выровнять мои элементы для планшета планшета?
Это HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Our Menu</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p1"> Chicken</p>
</div>
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p2"> Beef</p>
</div>
<div class="col-lg-4 col-md-12 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p3"> Sushi</p>
</div>
</div>
</body>
</html>
Это CSS:
/* width and height will include border and padding */
* {
box-sizing: border-box;
}
h1 {
margin-bottom: 15px;
text-align: center;
}
/*Set an anchor for the container of p elements*/
div.anchor{
position: relative;
}
#p1{
background-color: yellow;
}
#p2{
background-color: #ff0000;
}
#p3{
background-color: #ffaabb;
}
/*.col-md-12 .content{
margin-right: 2.5%;
margin-left: 2.5%;
*/
p.content{
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
margin-right: 5%;
margin-left: 5%;
font-family: Helvetica;
color: white;
padding: 20px;
}
p.my-title{
position: absolute;
top: 0px;
right: 0px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
margin-right: 5%;/*inherit; 22.525px; inherit*/
margin-top: 16px;
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
/********** desktop devices only **********/
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
}
/********** Tablet devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12 {
float: left;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-12 {
width: 100%;
/*margin-right: -5.5%;
margin-left: -2.8%;*/
}
}
/********** mobile devices only **********/
/* the floating is only defined inside the media queries.
The elements will behave just like regular block level elements,
and they will automatically stack one on top of the other.
Anyway, it's better to explicit define the media query also for
mobile phones. */
@media (max-width: 767px) {
.col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12 {
float: left;
}
.col-sd-9 {
width: 74.99%;
}
.col-sd-10 {
width: 83.33%;
}
.col-sd-11 {
width: 91.66%;
}
.col-sd-12 {
width: 100%;
}
}
Спасибо!
проблемы с вашей процентной маржей вашей математики не складывается. в вашем верхнем ряду у вас есть 5% -ный запас 4 раза влево и вправо на обоих элементах , а в нижнем ряду у вас есть 5% -ный запас 2 раза. слева и справа для этого элемента –