Адаптивный макет CSS, желающий сделать один столбец разной ширины, чем другие

ProgramBox

Адаптивный макет CSS, желающий сделать один столбец разной ширины, чем другие

Post author:admin
Запись опубликована:12 февраля, 2023
Post category:Вопросы по программированию

#html #css #responsive-design

#HTML #css — код #адаптивный дизайн #css

Вопрос:

Я застрял на одной части вопроса для домашнего задания.

Мы создаем 3 адаптивных макета (я назвал их lg, md, xs) для простого сайта, состоящего из 3 блоков.

Нам не разрешено использовать bootstrap для этого. Вы можете увидеть мою реализацию здесь: https://jennlhay.github.io/coursera-test/assn1/index.html

На макете среднего размера, предназначенном для планшетных устройств (вы можете увидеть его, изменив размер поля), макет из 3 блоков оборачивается.

Я пытаюсь понять, как сделать так, чтобы третья коробка занимала целый ряд. Как и в случае, займите другую область сетки, чем 2 поля над ней.

Я перепробовал много разных способов сделать это (изменение divs контейнера на отдельные идентификаторы, добавление некоторых дополнительных определений столбцов в css для col-md и т.д.), Но не могу понять это. HTML и CSS выглядят следующим образом:

HTML

 <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Assignment Solution for Module 2</title>
</head>
<body>
    <h1>Our Menu</h1>
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="left">Chicken</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>
        <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="middle">Meat</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>
        <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>
    </div>
</html>

CSS — код

 * {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetia, sans-serif;
}

h1 {
    text-align: center;
    font-size: 175%;
    margin-bottom: 30px;
}

h2 {
  position: relative;
  float: right;
  border: 1px solid black;
  margin: 0;
  padding: 10px;
  font-size: 125%;
}

#left {
  background-color: white;
}

#middle {
  background-color: blue;
}

#right {
  background-color: gray;
}

.container {
  border: 1px solid black;
  background-color: yellow;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10%;
  overflow: hidden;
}

p {
  padding-top: 15px;
    font-size: 100%;
  clear: right;
}

.row {
    width: 100%;
}

@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    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%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .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-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
} 

@media (max-width: 767px) {
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  }
  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.66%;
  }
  .col-xs-9 {
    width: 74.99%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }
}

Ответ №1:

Вы пытаетесь сделать третью строку полной ширины на экране среднего размера? Если это так, вы бы просто изменили класс col-md с:

         <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>

Для:

         <div class="col-lg-4 col-md-12 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>

1. Спасибо! Это было довольно простое исправление, которое я как-то пропустил. Изменения CSS в приведенном ниже ответе также помогли исправить стиль в сочетании с вашим предложением.

Ответ №2:

Если вы ищете это http://prntscr.com/cq7osg

затем ниже приведен код, который покажет вам, как я это сделал

 * {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetia, sans-serif;
}

h1 {
    text-align: center;
    font-size: 175%;
    margin-bottom: 30px;
}

h2 {
  position: relative;
  float: right;
  border: 1px solid black;
  margin: 0;
  padding: 10px;
  font-size: 125%;
}

#left {
  background-color: white;
}

#middle {
  background-color: blue;
}

#right {
  background-color: gray;
}

.container {
    border: 1px solid black;
    background-color: yellow;
    /* width: 90%; */
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 10%;
    overflow: hidden;
}

p {
  padding-top: 15px;
    font-size: 100%;
  clear: right;
}

.row {
    width: 100%;
}

@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    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%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .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-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }

  .entire-row {
  	width: 100%;
  }
} 

@media (max-width: 767px) {
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  }
  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.66%;
  }
  .col-xs-9 {
    width: 74.99%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }
}

 <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Assignment Solution for Module 2</title>
    
</head>
<body>
    <h1>Our Menu</h1>
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
        	<div class="container"><h2 id="left">Chicken</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>
        <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="middle">Meat</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>
        <div class="col-lg-4 col-md-6 col-xs-12 entire-row"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>
    </div>
</html>

1. Спасибо за это. Для третьего блока <div class=»col-lg-4 col-md-6 col-xs-12 whole-row»> у меня по какой-то причине не сработал. Однако изменение его на <div class=»col-lg-4 col-md-12 col-xs-12″> (как было предложено выше) в сочетании с вашими изменениями css устранило проблему.

2. Я пробую это и отлично работаю для меня. Я не знаю, почему это не работает для вас. Но в любом случае ваша проблема решена, это хорошая новость