Как автоматически настроить родительский div вокруг дочерних div?

Извиняюсь за любую путаницу, которая может возникнуть из-за этого вопроса, я просто погружаю пальцы в html, и любая помощь приветствуется.Как автоматически настроить родительский div вокруг дочерних div?

Чтобы указать элементы, о которых я говорю, я поставил свои селектора CSS в круглые скобки, чтобы попытаться устранить путаницу. По какой-то причине мой родительский div #box_one div{} настраивается в зависимости от его высоты дочернего div, но не его ширины.

Например, высота div ребенка #box_one div{} > div равна 100px, поэтому его родитель настроен на эту высоту, плюс дополнительное заполнение. Но когда я изменяю ширину #box_one div > div дочернего div на 20px, родительский div #box_one div{} остается неизменным и его ширина соответствует самому внешнему родительскому #box_one.

#box_one { 
 
    border: 3px outset #eee; 
 
    margin: 10px; 
 
    width: 400px; 
 
    height: 400px; 
 
    background-color: #eee; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
    padding: 10px; 
 
} 
 
#box_one div { 
 
    margin-top: 20px; 
 
    border: inset; 
 
    padding: 5%; 
 
} 
 
#box_one div>div { 
 
    height: 100px; 
 
    width: 200px; 
 
    margin: 0px; 
 
} 
 
p { 
 
    text-align: center; 
 
    border-style: inset; 
 
    margin-top: 0px; 
 
}

<html> 
 

 
<head> 
 
    <title>Text</title> 
 
    <link rel="stylesheet" type="text/css" href="website.css"> 
 
</head> 
 

 
<body> 
 
    <div id="box_one"> 
 
    <p>This is some text.</p> 
 
    <div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2017-01-18 Forrest Carlton

'#box_one div' фактически выбирает два div, поскольку он соответствует любому div, который является потомком' # box_one'. – Ouroborus

Блочный элемент будет занимать всю доступную ширину по умолчанию, и быть 0 Высота по умолчанию. Таким образом, родительский элемент всегда будет на 100% шириной, если не указано иное, но только так же высоко, как и его дети.

Если вы хотите, чтобы родитель ширина, чтобы соответствовать тому, что из его детей, вы можете назначить либо float (как float: left;) или display: inline-block; родителю.

* {box-sizing:border-box;} 
 
#box_one { 
 
    border: 3px outset #eee; 
 
    margin: 10px; 
 
    background-color: #eee; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
    padding: 10px; 
 
    float: left; 
 
} 
 
#box_one div { 
 
    margin-top: 20px; 
 
    border: inset; 
 
    padding: 5%; 
 
} 
 
#box_one div>div { 
 
    height: 100px; 
 
    width: 200px; 
 
    margin: 0px; 
 
} 
 
p { 
 
    text-align: center; 
 
    border-style: inset; 
 
    margin-top: 0px; 
 
}

<html> 
 

 
<head> 
 
    <title>Text</title> 
 
    <link rel="stylesheet" type="text/css" href="website.css"> 
 
</head> 
 

 
<body> 
 
    <div id="box_one"> 
 
    <p>This is some text.</p> 
 
    <div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2017-01-18 00:23:58

Спасибо, сэр, это был очень четкий ответ и хорошо сформулированный! –

@ForrestCarlton добро пожаловать! Рад был помочь. –

Вы можете сделать его inline-block и стереть все настройки ширины и высоты от его CSS. Но в этом случае убедитесь, что дети имеют содержание и/или фиксированной ширины и высоты:

#box_one{ 
 
    border:3px outset #eee; 
 
    margin:10px; 
 
    display: inline-block; 
 
    background-color: #eee; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
    padding:10px; 
 
} 
 
#box_one div{ 
 
    margin-top:20px; 
 
    border:inset; 
 
    padding: 5%;  
 
} 
 

 
#box_one div>div{ 
 
    height: 100px; 
 
    width:200px; 
 
    margin:0px; } 
 

 
p{ 
 
    text-align: center; 
 
    border-style:inset; 
 
    margin-top:0px; 
 
}

<head> 
 
     <title>Text</title> 
 
     <link rel="stylesheet" type="text/css" href="website.css"> 
 
    </head> 
 
    <body> 
 
     <div id="box_one"> 
 
      <p>This is some text.</p> 
 
      <div> 
 
       <div></div> 
 
      </div> 
 
     </div> 
 

 
    </body>

источник

2017-01-18 00:19:25 Johannes

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

Высота div определяется по высоте ребенка, но ширина будет определяться шириной его родителя. Чтобы отрегулировать div вокруг своих детей, лучше всего установить ширину родительского div на всю ширину, которая вам нужна, и установить ширину дочернего div на 100%, а высота ребенка - на нужную вам высоту или добавить необходимый вам контент , высота которого будет приниматься обоими div.

div.parent { 
    width: 20px; 
} 
div.child { 
    width: 100%; 
    height: 50px; 
} 

<div class="parent"> 
    <div class="child"></div> 
</div>

источник

2017-01-18 00:37:19 poushy

Как автоматически настроить родительский div вокруг дочерних div?

ответ

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