разделение экрана на 3 на начальной загрузке 4 - PullRequest
Новая
       3

разделение экрана на 3 на начальной загрузке 4

1 голос
/ 12 мая 2019

Я ищу разделить экран на 3 секции

На широком экране: enter image description here

На маленьком экране:

enter image description here

Есть идеи, как этого добиться? Я предполагаю, что есть комбинация flexbox и системы сетки, но я не могу понять это.

Редактировать: Я только что пробовал использовать только строку и столбец, но я не уверен, что это идеальное решение 

#left {
  height: 600px;
}

#righttop {
  height: 300px;
}

#rightbottom {
  height: 300px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/style.css" />

    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 bg-success" id="left">
          left part
        </div>
        <div class="col-md-6">
          <div class="row bg-primary" id="righttop">first part right</div>
          <div class="row bg-warning" id="rightbottom">first part left</div>
        </div>
      </div>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Ответы [ 3 ]

1 голос
/ 12 мая 2019

Три комбинации изображений, 

html,
body {
  height: 100%;
  width: 100%;
}

h1 {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
}

.img_container {
  width: 70vw;
  height: 80vh;
  margin: 20px auto;
  display: flex;
}

.main-img {
  width: 50%;
  height: 100%;
  margin-right: 10px;
  background-color: orange;
}

@media (max-width: 991px) {
  .main-img {
    width: 100%;
    height: 100%;
  }
}

.stacked-div {
  width: 50%;
  height: 100%;
}

@media (max-width: 991px) {
  .stacked-div {
    width: 100%;
    height: 100%;
  }
}

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .4s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-img:hover .overlay,
.top-img:hover .overlay,
.bottom-img:hover .overlay {
  opacity: 1;
}

.top-img,
.bottom-img {
  width: 100%;
  height: calc(50% - 5px);
  background-color: orangered;
}

.top-img {
  margin-bottom: 10px;
}
<div class="img_container">
  <!-- top level image container START-->
  <div class="main-img">
    <!--Main image -->
    <div class="overlay">
      <!--overlay div -->
      <h1>Hello!</h1>
    </div>
  </div>


  <div class="stacked-div">
    <!--stacked img container -->
    <div class="top-img">
      <!--top image -->
      <div class="overlay">
        <h1>hello!</h1>
      </div>
      <!--overlay -->
    </div>
    <div class="bottom-img">
      <!--bottom image -->
      <div class="overlay">
        <h1>hello!</h1>
      </div>
      <!--overlay -->
    </div>
  </div>
0 голосов
/ 12 мая 2019

В Bootstrap 4 можно было бы использовать служебные классы flexbox ... 

<div class="container">
    <div class="row">
        <div class="col-md-6 bg-success min-vh-100" id="left">
            left part
        </div>
        <div class="col-md-6 d-flex flex-column">
            <div class="row flex-grow-1">
                <div class="col-md-12 bg-primary min-vh-100 min-vh-md-50" id="righttop">first part right</div>
                <div class="col-md-12 bg-warning min-vh-100 min-vh-md-50" id="rightbottom">first part left</div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/vbWvESRSXP

Тогда вам просто нужно немного дополнительного CSS, чтобы создать нужные столбцы 1/ 2 высоты на md и шире .. 

@media (min-width: 768px) {
    .min-vh-md-50 {
        min-height: 50% !important;   
    }
}
0 голосов
/ 12 мая 2019

Вы правы, вы должны использовать Grid System с точками останова, строками и столбцами, прочитайте официальную документацию.

Если вы все еще ищете ответ, посмотрите это.

<div class="row">
<div class="col-md">First col md</div>
<div class="col-md">
  <div class="row">
    <div class="col-12">Second col xs</div>
    <div class="col-12">Third col xs</div>
  </div>
</div>

Перейдите по этой ссылке .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...