0

У меня есть два блока – один родительский, другой дочерний.

Вопрос: как сделать так, чтобы родительский блок, растягивался вместе с дочерним? codepen

body {
  background: pink;
}

* {
  margin: 0;
  padding: 0;
  font-size: 20px;
}

.groups_line {
    margin: 0 auto;
    width: 1565px;
    padding-right: 40px;
    padding-left: 40px;
    display: flex;
}

.line {
    width: 519px;
    min-height: 319px;
  height: fit-content;
    margin-right: 4px;
    position: relative;
  background: #63313a;
}

.line:last-child {
    margin-right: 0px;
}

.first_group {
    background-image: url(img/[email protected]);
}

.second_group {
    background-image: url(img/kaboompics.com_Woman_preparing_a_lunch_on_the_kitchen_table.png);
}

.third_group {
    background-image: url(img/photo-1453822858805-7c095c06011e.png);
}

.border {
    position: absolute; 
    width: 466px;
    height: fit-content;
    border: 3px solid #b59f5b;
    top: 170px;
    left: 50%;
    transform: translate(-50%);
}

.border > .heading {
    color: #b59f5b;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 700;
  padding-top: 23px;
  padding-bottom: 16px;
    text-transform: uppercase;
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
}

.text {
    color: #ffffff;
    font-family: "Josefin Sans";
    font-size: 20px;
    font-weight: 550;
    text-transform: uppercase;
  text-align: center;
  width: 353px;
  margin: 0 auto;
  font-family: "Josefin Sans", sans-serif;
}

.parent_data {
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  justify-content: space-between;
}

.data {
color: #ffffff;
font-family: "Open Sans";
font-size: 12px;
font-weight: 300;
position: absolute;
left: 0;
bottom: 0;
  line-height: 40px;
  margin: 0 7px;
}

.number {
color: #ffffff;
font-family: "Open Sans";
font-size: 12px;
font-weight: 300;
line-height: 40px;

}

.fa-comment {
  margin: 0 7px;
  color: #b59f5b;
}
.comment_logo {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
}
}
.comment_logo {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
}
<div class="groups_line">
            <div class="first_group line">
                <div class="first-group-line border">
                    <p class="group_line heading">beauty   health  lifestyle</p>
                    <p class="group_line text">FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quas mollitia natus, porro sit ex nisi blanditiis voluptas minus maxime laboriosam officia sapiente doloremque tempore vel possimus voluptatum iure soluta?</p>
          <div class="parent_data">
                      <p class="group-line data">June 14, 2015</p>
                      <div class="group-line comment_logo">
                          <p class="group-line number">24</p>
                          <i class="fas fa-comment"></i>
                      </div>
          </div>
                </div>
            </div>
        <div class="second_group line">
            <div class="second-group-line border">
                <p class="group_line heading">health</p>
                <p class="group_line text">5 Tips To Supercharge Your 
Motivation</p>
                <div class="parent_data">
                      <p class="group-line data">June 14, 2015</p>
                      <div class="group-line comment_logo">
                          <p class="group-line number">24</p>
                          <i class="fas fa-comment"></i>
          </div>
                </div>
            </div>
        </div>
        <div class="third_group line">
            <div class="third-group-line border">
                <p class="group_line heading">Beauty</p>
                <p class="group_line text">To Keep Makeup Looking Fresh Take A Powder</p>
                <div class="parent_data">
                      <p class="group-line data">June 14, 2015</p>
                      <div class="group-line comment_logo">
                          <p class="group-line number">24</p>
                          <i class="fas fa-comment"></i>
                      </div>
          </div>
            </div>
        </div>
    </div>

3
  • 1) Переходите от строгих px к % 2) Создайте минимальную версию блока 3) Переходите на медиа запросы @media all and (max-width: 600px) { #page { width: 100%; } 4) Эти же шаги делайте для максимального размера блока.
    – sair
    28 сен 2020 в 15:12
  • @sair width: 100% растягивает блок до ширины окна браузера. Мне нужно растянуть родительский блок до краев дочернего. И медиа запросы мне не нужны, тут скорее больше вопрос о резиновости, а не об адаптиве
    – Eva
    28 сен 2020 в 15:17
  • @sair можно и без процентов 28 сен 2020 в 17:50

1 ответ 1

1

Если коротко:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.parent {
  background-color: red;
  max-width: 500px;
  width: 100%;
  padding: 40px;
  margin: 0 auto;
}

.child {
  background-color: green;
}
<div class="parent">
  
  <div class="child">
    Текст
  </div>

</div>

Если не коротко:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
  background-color: pink;
}

:root {
  --poopColor: #b59f5b;
}

img {
  display: block;
  max-width: 100%;
}

section {
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex__item {
  background-color: #63313a;
  --elements: 3;
  --marginRight: 15px;
  width: calc( 100% / var(--elements) - ( ((var(--elements) * var(--marginRight)) - var(--marginRight)) / var(--elements)));
  color: white;
  padding: 20px;
  text-align: center;
  background: url('https://picsum.photos/1000/500') no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.flex__item:nth-child(2n) {
  background-image: url('https://picsum.photos/1100/500');
}

.flex__item:nth-child(3n) {
  background-image: url('https://picsum.photos/1000/600');
}

.flex__item::before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.6);
}

.flex__item_border {
  border: 3px solid var(--poopColor);
  padding: 10px;
  margin-top: 170px;
}

.flex__item_border > *:not(:last-child) {
  margin-bottom: 20px;
}

.flex__item:not(:nth-child(3n)) {
  margin-right: var(--marginRight);
}

.flex__item_info {
  display: flex;
  justify-content: space-between;
}

.flex__item_info_comment {
  display: flex;
}

.flex__item_info_comment i {
  color: var(--poopColor);
}

.flex__item .comment_number {
  margin-right: 10px;
}

.flex__item_title {
  color: var(--poopColor);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 20px;
}

.flex__item_text {
  text-transform: uppercase;
}

.flex__item_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex__item_nav a {
  color: white;
  text-decoration: none;
  outline: none;
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
}

.flex__item_nav a::after {
  position: absolute;
  content: '';
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--poopColor);
  bottom: 0;
  transform: scaleX(0);
  transform-origin: center bottom;
  transition: transform 0.2s linear;
}

.flex__item_nav a:hover::after {
  transform: scaleX(0.8);
}


@media (max-width: 880px) {
  .flex__item {
    --elements: 2;
  }

  .flex__item:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .flex__item:not(:nth-child(2n)) {
    margin-right: var(--marginRight);
  }
  
  .flex__item:nth-child(n+3) {
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .flex__item {
    --elements: 1;
  }

  .flex__item:not(:nth-child(2n)) {
    margin-right: 0;
  }

  .flex__item:nth-child(n+3) {
    margin-top: 0;
  }

  .flex__item:nth-child(n+2) {
    margin-top: var(--marginRight);
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<section>
  <div class="container">
    
    <div class="flex-container">
      <div class="flex__item">
        <div class="flex__item_border">
          <div class="flex__item_nav">
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
          </div>
          <div class="flex__item_text">From grapefruit to lemons to oranges, citrus does you good! lorem ipsum dolor sit amet consectetur adipisicing elit. deleniti quas mollitia natus, porro sit ex nisi blanditiis voluptas minus maxime laboriosam officia sapiente doloremque tempore vel possimus voluptatum iure soluta?</div>
          <div class="flex__item_info">
            <div class="flex__item_info_date">June 14, 2015</div>
            <div class="flex__item_info_comment">
              <div class="comment_number">24</div>
              <i class="fas fa-comment"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__item">
        <div class="flex__item_border">
          <div class="flex__item_nav">
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
          </div>
          <div class="flex__item_text">From grapefruit to lemons to oranges, citrus does you good! lorem ipsum dolor sit amet consectetur adipisicing elit. deleniti quas mollitia natus, porro sit ex nisi blanditiis voluptas minus maxime laboriosam officia sapiente doloremque tempore vel possimus voluptatum iure soluta?</div>
          <div class="flex__item_info">
            <div class="flex__item_info_date">June 14, 2015</div>
            <div class="flex__item_info_comment">
              <div class="comment_number">24</div>
              <i class="fas fa-comment"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__item">
        <div class="flex__item_border">
          <div class="flex__item_nav">
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
          </div>
          <div class="flex__item_text">From grapefruit to lemons to oranges, citrus does you good! lorem ipsum dolor sit amet consectetur adipisicing elit. deleniti quas mollitia natus, porro sit ex nisi blanditiis voluptas minus maxime laboriosam officia sapiente doloremque tempore vel possimus voluptatum iure soluta?</div>
          <div class="flex__item_info">
            <div class="flex__item_info_date">June 14, 2015</div>
            <div class="flex__item_info_comment">
              <div class="comment_number">24</div>
              <i class="fas fa-comment"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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