0

Блок чекбоксов прилеплен слева к низу, а кнопка "Add" прилеплена справа к низу. Как реализовать, чтобы на разных экранах ничего на съезжало?

введите сюда описание изображения

html,
body {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  line-height: 29px;
  color: #1b1b1b;
}

// body{padding-top: 10px}
.container {
  display: flex;
  width: 100%;
  outline: 1px solid red;
  /*del*/
  padding-top: 25px;
  background: #ffffff;
}

.left-block {
  background: #e9e9e9;
  width: 198px;
  height: 663px;
  -ms-flex: 0 198px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-box-flex: 0;
  box-flex: 0;
}

.img-left {
  text-align: center;
}

.img-left img {
  margin-bottom: 23px;
}

.right-block {
  // margin-left: 28px;
  outline: 1px solid green;
  /*del*/
  -ms-flex: 0 198px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-box-flex: 0;
  box-flex: 0;
  width: 100%;
  padding-left: 27px;
}

.text {
  font-family: arial;
  font-size: 18px;
  font-weight: 700;
  color: #177cbc;
}

hr {
  height: 2px;
  margin: 0;
  border: 0;
  background: linear-gradient(to right, #027abe 0%, transparent 100%);
}

.block-row {
  margin-top: 20px;
  display: flex;
  min-height: 263px;
  border: 1px solid #1b1b1b;
}

.img-block {
  // width: 45%;
  border-right: 1px solid #1b1b1b;
  padding: 30px 55px;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}

.outline {
  display: inline-flex;
  padding: 3px 9px;
  border: 1px solid #1b1b1b;
}

.content-block {
  position: relative;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Company name</title>
</head>

<body>

  <div class="container">

    <div class="left-block">
      <div class="img-left">
        <img src="img/lb-1.jpg" alt="easyflex">
        <img src="img/lb-2.jpg" alt="adv">
        <img src="img/lb-1.jpg" alt="easyflex">
        <img src="img/lb-2.jpg" alt="adv">
      </div>
    </div>

    <div class="right-block">
      <div class="text">Main content listing header.</div>
      <hr>
      <div class="block-row">
        <div class="img-block">
          <div class="outline"><img src="img/globe.png" alt="globe"></div>
        </div>
        <div class="content-block">
          <h1>Header always on top and could be any length. Header always on top and could be any length.</h1>
        </div>
        <div class="check">
          <form action="#" method="post">
            <label><input type="checkbox">First option.</label><br>
            <label><input type="checkbox">Second option.</label><br>
            <label><input type="checkbox">Third option.</label><br>
            <label><input type="checkbox">Fourth option.</label>
            <input class="btn" type="submit" value="+add">
          </form>
        </div>
      </div>
    </div>

  </div>

</body>

</html>

2

1 ответ 1

1

С помощью flexbox можно сделать так:

  • Внутри content-block расставить всё в виде колонки(flex-direction: column;). С помощью justify-content: space-between; мы приклеим первый элемент сверху, последний приклеим к низу, а остальные будут иметь одинаковый отступ между собой.
  • Внутри .check с помощью justify-content: space-between; раскидаем два элемента по углам.

Добавил два div'a с текстом чтобы понять как располагаются другие элементы.

html,
body {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  line-height: 29px;
  color: #1b1b1b;
}

// body{padding-top: 10px}
.container {
  display: flex;
  width: 100%;
  outline: 1px solid red;
  /*del*/
  padding-top: 25px;
  background: #ffffff;
}

.left-block {
  background: #e9e9e9;
  width: 198px;
  height: 663px;
  -ms-flex: 0 198px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-box-flex: 0;
  box-flex: 0;
}

.img-left {
  text-align: center;
}

.img-left img {
  margin-bottom: 23px;
}

.right-block {
  // margin-left: 28px;
  outline: 1px solid green;
  /*del*/
  -ms-flex: 0 198px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-box-flex: 0;
  box-flex: 0;
  width: 100%;
  padding-left: 27px;
}

.text {
  font-family: arial;
  font-size: 18px;
  font-weight: 700;
  color: #177cbc;
}

hr {
  height: 2px;
  margin: 0;
  border: 0;
  background: linear-gradient(to right, #027abe 0%, transparent 100%);
}

.block-row {
  margin-top: 20px;
  display: flex;
  min-height: 263px;
  border: 1px solid #1b1b1b;
}

.img-block {
  // width: 45%;
  border-right: 1px solid #1b1b1b;
  padding: 30px 55px;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}

.outline {
  display: inline-flex;
  padding: 3px 9px;
  border: 1px solid #1b1b1b;
}

.content-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.check form {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Company name</title>
</head>

<body>

  <div class="container">

    <div class="left-block">
      <div class="img-left">
        <img src="img/lb-1.jpg" alt="easyflex">
        <img src="img/lb-2.jpg" alt="adv">
        <img src="img/lb-1.jpg" alt="easyflex">
        <img src="img/lb-2.jpg" alt="adv">
      </div>
    </div>

    <div class="right-block">
      <div class="text">Main content listing header.</div>
      <hr>
      <div class="block-row">
        <div class="img-block">
          <div class="outline"><img src="img/globe.png" alt="globe"></div>
        </div>
        <div class="content-block">
          <h1>Header always on top and could be any length. Header always on top and could be any length.</h1>
          <div>
            <p>Up is opinion message manners correct hearing husband my. Disposing commanded dashwoods cordially depending at at. Its strangers who you certainty earnestly resources suffering she. Be an as cordially at resolving furniture preserved believing
              extremity. Easy mr pain felt in. Too northward affection additions nay. He no an nature ye talent houses wisdom vanity denied.
            </p>
          </div>
          <div>
            <p>
              Up is opinion message manners correct hearing husband my. Disposing commanded dashwoods cordially depending at at. Its strangers who you certainty earnestly resources suffering she. Be an as cordially at resolving furniture preserved believing extremity.
              Easy mr pain felt in. Too northward affection additions nay. He no an nature ye talent houses wisdom vanity denied.
            </p>
          </div>
          <div class="check">
            <form action="#" method="post">
              <div>
                <label><input type="checkbox">First option.</label><br>
                <label><input type="checkbox">Second option.</label><br>
                <label><input type="checkbox">Third option.</label><br>
                <label><input type="checkbox">Fourth option.</label>
              </div>
              <input class="btn" type="submit" value="+add">
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>

</body>

</html>

3
  • Вы мне очень помогли! Спасибо)) Commented 16 мар. 2017 в 5:12
  • @АлександрЖариченко Надеюсь вы поняли как с помощью флексбокс можно позиционировать элементы.
    – qpeela
    Commented 16 мар. 2017 в 5:13
  • Да, запомнил... Еще почитаю о flex-верстке. Commented 16 мар. 2017 в 5:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.