Не удается поместить вложенный div в стек

Я пытаюсь воспроизвести коробку закусочной в css, чтобы попрактиковаться в некоторых вещах, которые я узнал в учебнике. У меня есть два элемента div внутри другого div («10» и «столбцы»), которые я пытаюсь сложить в стек. Но они просто сидят рядом.

Вот мой код:

/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/

/*GLOBAL STYLE
------------------------------*/
body {
  background: #769A30;

}

@font-face {
  font-family: 'Akzidenz';
  src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}

h1, h2 {
  color: #F0CD92;
  font-family: 'Akzidenz';
}



/*HEADER
------------------------------*/
.headerSection {
  text-align: center;
  background: #612D22;
  margin: 0px;
  padding: 0px;
  height: 100px;

}

.headerDiv {
  display: inline-block;
  text-align: center;
  background: red;
  height: 100px;
  width: 100px;
  line-height: 100px;



}

#middleDiv {
  display: inline-block;
}

.middleSubDiv {
  text-align: center;
  display: inline-block;
  background: #E63A3E;
  height: 50px;
  width: 100px;
  line-height: 50px;


}

.topH1 {
  margin: 0px;
  padding: 0px;

}

.topH2 {
  margin: 0px;
  padding: 0px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title> Larabar | Apple Pie</title>
  <link rel = "stylesheet" href = "css/styles.css">

</head>

<body>
  <div class = "headerSection"><!--
--><div class = "headerDiv"><!--
---><h1 class = "topH1">value<h1><!--
--></div><!--
--><div id = "middleDiv"><!--
---><div class  = "middleSubDiv"><!--
----><h2 class = "topH2">10<h2><!--
---></div><!--
---><div class  = "middleSubDiv"><!--
----><h2 class = "topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class = "headerDiv"><!--
--><h1 class = "topH1">pack<h1><!--
--></div><!--
--></div>

  <footer>
  </footer>


</body>

</html>

Если я удалю "display: inline-block;" из класса middleSubDiv (два блока div, которые должны складываться) они ДОЛЖНЫ складываться правильно, но затем расположенные рядом с ними блоки выталкиваются вниз. Может кто-нибудь помочь мне понять, почему это так? Вот изображение того, о чем я говорю

Спасибо, любая помощь приветствуется!

вы предоставляете display:block внутри контейнера display: inline-block, что мешает потоку. Обратитесь к: stackoverflow.com/questions/1371307/… Итак, для этого используйте display: flex, чтобы получить желаемый макет.

— 28.08.2018 13:34

css

28.08.2018 13:28

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 1

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

Удалите display: inline-block; из .middleSubDiv и добавьте vertical-align: bottom; в .headerDiv.

/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/

/*GLOBAL STYLE
------------------------------*/
body {
  background: #769A30;

}

@font-face {
  font-family: 'Akzidenz';
  src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}

h1, h2 {
  color: #F0CD92;
  font-family: 'Akzidenz';
}



/*HEADER
------------------------------*/
.headerSection {
  text-align: center;
  background: #612D22;
  margin: 0px;
  padding: 0px;
  height: 100px;

}

.headerDiv {
  display: inline-block;
  text-align: center;
  background: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  vertical-align: bottom;


}

#middleDiv {
  display: inline-block;
}

.middleSubDiv {
  text-align: center;
/*      display: inline-block;*/
  background: #E63A3E;
  height: 50px;
  width: 100px;
  line-height: 50px;


}

.topH1 {
  margin: 0px;
  padding: 0px;

}

.topH2 {
  margin: 0px;
  padding: 0px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title> Larabar | Apple Pie</title>
  <link rel = "stylesheet" href = "css/styles.css">

</head>

<body>
  <div class = "headerSection"><!--
--><div class = "headerDiv"><!--
---><h1 class = "topH1">value<h1><!--
--></div><!--
--><div id = "middleDiv"><!--
---><div class  = "middleSubDiv"><!--
----><h2 class = "topH2">10<h2><!--
---></div><!--
---><div class  = "middleSubDiv"><!--
----><h2 class = "topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class = "headerDiv"><!--
--><h1 class = "topH1">pack<h1><!--
--></div><!--
--></div>

  <footer>
  </footer>


</body>

</html>

Это сработало отлично. Думаю, мне нужно больше узнать о вертикальном выравнивании. Спасибо, сэр!

— 28.08.2018 14:07

28.08.2018 13:34