Как совместить адаптивный макет и столбцы одинаковой высоты в CSS? - PullRequest
Новая
       13

Как совместить адаптивный макет и столбцы одинаковой высоты в CSS?

0 голосов
/ 18 сентября 2018

Я новичок в CSS, и в настоящее время я пытаюсь комбинировать адаптивный макет, который выглядит по-разному в зависимости от экрана, на котором он отображается, и равных высот в столбцах.Мне кажется, мне удалось сделать их отдельно (1. использовать адаптивный макет при определении фиксированной высоты для столбцов - но это становится грязным, потому что текст может переполниться или 2. вывести столбцы одинаковой высоты с помощью flex, но без медиазапросов. Iесть 3 столбца, и я стремлюсь:

  • для больших устройств: строка 1x3
  • для средних устройств: строка 1x2 и строка 1x1 (в первой строке 2 столбцадолжна иметь ширину 50% каждая, в то время как во второй строке ширина 3-го столбца должна быть 100%.)
  • для небольших устройств: 3x1 (3 строки, каждый столбец должен иметь ширину 100%)

У меня есть 2 основные проблемы:

  • высота цвета фона столбцов не равна во всех трех из них - хотя граница равна
  • столбцы делаютне охватывать более одной строки, даже для небольших устройств.

Вот мой код в jsfiddle: https://jsfiddle.net/chrissa3/967nzmus/#&togetherjs=N0boOJaHPF

И прикреплен здесь: 

    *{
       box-sizing: border-box;
       font-family: "Book Antiqua";
     }
    
     h1 {
       margin-bottom: 15px;
       text-align: center;
     }
    
     .row {
       width: 100%;
       display: flex;
       overflow: auto;
     }
    
     .box {
       flex: 1;
       background-color: #AAAAAA;
       color: white;
       text-align: justify;
       padding: 10px;
       margin-left: 20px;
       margin-right: 20px;
     }
    
     h2 {
       position: relative;
       background-color: #222222;
       color: white;
       border: 1px solid white;
       text-align: center;
       width: 40%;
       margin-inline-start: 60%;
     }
    
     /********** Large devices only **********/
    
     @media only screen and (min-width: 1200px) {
       .col-lg-4 {
         float: left;
         border: 1px solid black;
         width: 33.33%;
       }
     }
    
     /********** Medium devices only **********/
    
     @media only screen and (min-width: 992px) and (max-width: 1199px) {
       .col-md-6,
       .col-md-12 {
         float: left;
         border: 1px solid green;
       }
       .col-md-6 {
         width: 50%;
       }
       .col-md-12 {
         width: 100%;
       }
     }
     /********** Small devices only **********/
     @media only screen and (max-width: 991px) {
       .col-sm-12 {
         float: left;
         border: 1px solid red;
         width: 100%;
       }
     }
    <h1>Responsive layout test</h1>
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="box">
            <h2>I am number 1!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="box">
            <h2>I am number 2!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada
              fames ac turpis egestas.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12">
          <div class="box">
            <h2>I am number 3!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada
              fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            </p>
          </div>
        </div>
      </div>

Заранее большое спасибо за вашу помощь!

1 Ответ

0 голосов
/ 18 сентября 2018

Хорошо, прежде всего вы перепутали "float" и "flex".

Когда вы создаете макет Flex, бесполезно что-либо плавать.

так что затем, чтобы понять это: 

display:flex;

работает для точно следующих детей, а не для более глубоких. Вот почему ваша внешняя граница имеет одинаковую высоту (например, вы использовали ее на «col-xs-12». То, что вы на самом деле хотите иметь одинаковую высоту, это ваша «коробка» -> здесь я добавил высоту: 100%, что в данном случае работает с flexbox.

В части html я добавил класс «column» для всех этих столбцов, здесь вы должны продолжить и определить стили, которые всегда учитываются (отступы, границы и т. Д.)

С этими стилями у вас уже есть желаемые высоты и прочее. Теперь вы хотите, чтобы он стал отзывчивым, поэтому вы сделали стили на 50% / 50% / 100%, что уже нормально. Как вы уже заметили, результат: 25% / 25% / 50%.

Это просто то, как flex работает по умолчанию: он помещает всех дочерних элементов в одну строку и вычисляет их ширину до 100% (в верхнем примере делится на 2)

Чтобы сделать макет, который вы хотите использовать: 

flex-wrap: wrap;

это заставляет ваш макет выглядеть желаемым образом реагировать.

вот обновленная скрипка: https://jsfiddle.net/smynzw8t/

...