Правильно содержащие дочерние элементы с полями и отступами

Я создаю шаблон с кнопками.

Моя проблема проста, но болезненна. Кажется, я не могу сделать все дочерние элементы идеально подходящими для каждого родительского элемента, одновременно создавая некоторое пространство между элементами.

Я не хочу использовать селектор :first-child, :last-child

jsfiddle https://jsfiddle.net/7b8snh5e/

Вот моя структура

HTML

<div class = "button-container">
     <div class = "button-row">
           <div class = "button-single">
               <span>Button 1</span>
           </div>
     </div>
     <div class = "button-row">
           <div class = "button-double">
               <span>Button 2</span>
           </div>
           <div class = "button-double">
               <span>Button 3</span>
          </div>
     </div>
</div>

CSS

.button-container{
    margin-top:5%;
    height:45%;
}
.button-row{
    display:flex;
    width:100%;
    max-height:50%;
    position:relative;
    height:100%;
    padding:5px 0;
    overflow:hidden;
    box-sizing: border-box;
}
.button-row div{
    border-radius:3px;
    border:1px solid #000ccc;
    position:relative;
    box-sizing: border-box;
}
.button-row span{
    font-size:1rem;
    width:fit-content;
    height:fit-content;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
.button-single{
    width:100%;
    margin:0px 5px;
    height:100%
}
.button-double{
    width:50%;
    margin:0px 5px;
    height:100%;
}
.button-footer{
    margin-top:2%;
    height:8%;
    font-size: 20px;
}

Когда я устанавливаю заполнение для каждого контейнера строки для пространства строки, вся обертка хорошо содержит своего потомка

Правильно содержащие дочерние элементы с полями и отступами

но один элемент кнопки переполняет свой родительский элемент (ряд кнопок)

Правильно содержащие дочерние элементы с полями и отступами

если я изменю padding:5px 0 на margin:5px 0 в ряду кнопок строка кнопок, кажется, хорошо содержит своего дочернего элемента.

Правильно содержащие дочерние элементы с полями и отступами

но теперь проблема в том, что элементы строки переполняют своего родителя

Правильно содержащие дочерние элементы с полями и отступами

что мне здесь не хватает?

Я не хочу, чтобы какой-либо дочерний элемент переполнял любой родительский элемент.

Можете ли вы объяснить немного больше, пожалуйста. если можно нарисуйте ожидаемый ответ

— 25.06.2019 11:01

Я ожидаю, что ни один дочерний элемент не переполняет родительский элемент, содержащийся только в синей области консоли разработчика.

— 25.06.2019 11:02

html css

25.06.2019 10:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я удалил height из .button-single, .button-double и поставил margin: 5px; там сам, а также удалил margin/padding из .button-row.

Надеюсь, это решит вашу проблему.

body{
  height: 100vh;
  display: block;
  position: relative;
}
.button-container{
    margin-top: 5%;
    height: 45%;
}
.button-row{
    display: flex;
    width: 100%;
    max-height: 50%;
    position: relative;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.button-row div{
    border-radius: 3px;
    border: 1px solid #000ccc;
    position: relative;
    box-sizing: border-box;
}
.button-row span{
    font-size: 1rem;
    width: fit-content;
    height: fit-content;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.button-single, .button-double {
  margin: 5px;
}
.button-single{
    width: 100%;
}
.button-double{
    width: 50%;
}
.button-footer{
    margin-top: 2%;
    height: 8%;
    font-size: 20px;
}

 <div class = "button-container">
   <div class = "button-row">
     <div class = "button-single">
       <span>Button 1</span>
     </div>
   </div>
   <div class = "button-row">
     <div class = "button-double">
       <span>Button 2</span>
     </div>
     <div class = "button-double">
       <span>Button 3</span>
     </div>
   </div>
</div>

25.06.2019 11:19

Ответ принят как подходящий

body{
  height: 100vh;
  display: block;
  position: relative;
}
.button-container{
    margin-top: 5%;
      /* problem here 
    height:45%;*/
}
.button-row{
    display: flex;
    width: 100%;
    max-height: 150px;
    position: relative;
    height: 150px;
    margin: 5px 0; 
    overflow: hidden;
    box-sizing: border-box;
}
.button-row div{
    border-radius: 3px;
    border: 1px solid #000ccc;
    position: relative;
    box-sizing: border-box;
}
.button-row span{
    font-size: 1rem;
    width: fit-content;
    height: fit-content;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.button-single{
    width: 100%;
    margin: 0px 5px;
    height: 100%;
}
.button-double{
    width: 50%;
    margin: 0px 5px;
    height: 100%;
}
.button-footer{
    margin-top: 2%;
    height: 8%;
    font-size: 20px;
}

 <div class = "button-container">
   <div class = "button-row">
     <div class = "button-single">
       <span>Button 1</span>
     </div>
   </div>
   <div class = "button-row">
     <div class = "button-double">
       <span>Button 2</span>
     </div>
     <div class = "button-double">
       <span>Button 3</span>
     </div>
   </div>
</div>

У вас есть фиксированная высота в вашем контейнере кнопок, поэтому ваш ребенок получил 100% высоты с полями, что выйдет из коробки!

это был самый близкий результат, который я хотел.

— 26.06.2019 04:07

25.06.2019 11:23

.button-row{
    display: flex;
    width: 100%;
    margin: 5px 0; 
    overflow: hidden;
    box-sizing: border-box;
}
.button-single{
    width: 100%;
    height: 100%;
}

Используйте высоту и ширину в процентах, не фиксируйте их в пикселях.

25.06.2019 11:34