Содержит один div в другом div

-1

Не могу понять, почему div с именем «boxb1» не находится внутри div с именем «bba». Я пробовал много разных вещей, но я просто не могу вложить эти div.Содержит один div в другом div

Не следует ли «bba» размещать «boxb1» внутри себя? Я пытаюсь создать отзывчивую страницу здесь. ?

jsfiddle настоящего кода.

Мой код:

html {} body { 
 
    padding-bottom: 1%; 
 
} 
 
.container { 
 
    width: 98.3%; 
 
    margin: 10px; 
 
    padding-bottom: 5%; 
 
    position: relative; 
 
} 
 
#twlth { 
 
    width: 100%; 
 
    padding-top: 5%; 
 
    padding-bottom: 5%; 
 
    float: left; 
 
} 
 
#boxb1 { 
 
    width: 21%; 
 
    padding-bottom: 1%; 
 
    float: left; 
 
    margin: 10px; 
 
    text-align: center; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.bba { 
 
    width: 100%; 
 
    -webkit-box-shadow: 10px 10px 108px 0px rgba(0, 0, 0, 0.68); 
 
    box-shadow: 10px 10px 108px 0px rgba(0, 0, 0, 0.68); 
 
    padding-bottom: 1%; 
 
    margin-bottom: 100px; 
 
}

<body> 
 

 
    <div class="container"> 
 
    <div class="bba"> 
 
     <h1 style="text-align: center">Text</h1> 
 
     <div id="boxb1"> 
 
     <h3>box1</h3> 
 
     <div id="twlth" width="10%" height="6%"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

источник

2015-12-06 Swapnil Pandey

Проблема заключается в том, что вы используете поплавок: слева, но не «расчистке» ничего после этого. Непозиционированные и неплавающие элементы действуют так, как будто плавающего элемента нет. поскольку плавающий элемент выходит из потока по отношению к другим элементам блока. Значение: поскольку «boxb1» имеет «float: left», его родитель будет притворяться, что «boxb1» там нет.

В CSS добавить что-то вроде:

.clear { 
    clear: both; 
}

HTML, может быть изменен следующим образом:

<div class="container"> 
<div class="bba"> 
    <h1 style="text-align: center">Text</h1> 
    <div id="boxb1"> 
     <h3>box1</h3> 
     <div id="twlth" width="10%" height="6%"></div> 
    </div>  
<div class="clear"></div> 
</div>

Jsfiddle

См: http://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/ для получения дополнительной информации об этом (и других потенциальных решений)

источник

2015-12-06 10:35:42 Nathan

Содержит один div в другом div

ответ

Смежные вопросы