Почему дочерние элементы div не отображаются внутри элемента div строки [дубликат] ⇐ CSS

[Anonymous]

Почему в моем коде дочерние элементы div не отображаются внутри элемента div строки? и почему третий элемент div разрывает строку и переносится?


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

/********** Base styles **********/

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

.row {
width: 100%;
background-color: lightblue;
padding: 10px;
}

h1 {
margin-bottom: 15px;
text-align: center;
}

div {
border: 1px solid black;
background-color: gray;
margin: 10px;
}

section {
text-align: right;
padding: 6px;
}

p {
padding: 10px;
font-family: Helvetica;
color: black;
margin: 0;
}

/* Simple Responsive Framework. */

/********** Large devices only **********/

@media (min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}

/********** Medium devices only **********/

@media (min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}

/********** Small devices only **********/

@media (max-width: 767px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}
.col-sm-1 {
width: 8.33%;
}
.col-sm-2 {
width: 16.66%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33%;
}
.col-sm-5 {
width: 41.66%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33%;
}
.col-sm-8 {
width: 66.66%;
}
.col-sm-9 {
width: 74.99%;
}
.col-sm-10 {
width: 83.33%;
}
.col-sm-11 {
width: 91.66%;
}
.col-sm-12 {
width: 100%;
}
}

Код: Выделить всё

My menu



Beef
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus euismod, bibendum erat id, rhoncus quam. Vestibulum laoreet erat diam, ut bibendum lorem ultricies vitae. Fusce accumsan facilisis ligula, vitae dignissim nisl finibus et. Mauris
nunc leo, pulvinar sit amet ligula at, eleifend efficitur lacus.

Chicken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus euismod, bibendum erat id, rhoncus quam. Vestibulum laoreet erat diam, ut bibendum lorem ultricies vitae. Fusce accumsan facilisis ligula, vitae dignissim nisl finibus et.  Mauris
nunc leo, pulvinar sit amet ligula at, eleifend efficitur lacus.

Fish
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus euismod, bibendum erat id, rhoncus quam. Vestibulum laoreet erat diam, ut bibendum lorem ultricies vitae. Fusce accumsan facilisis ligula, vitae dignissim nisl finibus et. Mauris
nunc leo, pulvinar sit amet ligula at, eleifend efficitur lacus.

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

Подробнее здесь: https://stackoverflow.com/questions/786 ... he-row-div