Div граница не покрывает всех дочерних divs

-1

У меня есть div, окружающий несколько div. Граница родительского div не охватывает все дочерние div, как показано на скрипке. Может ли кто-нибудь сказать, в чем проблема?Div граница не покрывает всех дочерних divs

<div style="border:1px dashed gray;"> 
    <div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div> 
    <div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div> 
    <div style="position:relative;top:50px;font-size: 10px">Some content</div> 
    <div style="position:relative;top:60px;background-color:#E6E0EC"> 
     <div class="glyphicon glyphicon-remove"></div> 
    </div> 
</div>

JSFiddle link

источник

2015-02-12 Sam

Если вы используете относительное позиционирование, они выходят за пределы родительского div - вот и вся идея в нем. – jsalonen

Мне нужен промежуток между элементами + граница должна охватывать все div. Если я удалю относительный, то я не могу указать позицию из родительского div. – Sam

Вы перемещаете их вне родительского div с вашим относительным позиционированием. Вместо этого я бы предложил использовать поля/paddings. Я не думаю, что вам нужно переместить их по отношению к родителям. – below9k

Вы используете position: relative на дивы не окруженными границы. Свойство относительной позиции перемещает содержимое элемента, но сохраняет зарезервированное пространство элемента в нормальном потоке.

Если вы хотите добиться того же макета с границей вокруг всего, то лучше всего использовать свойство margin. Я обновил свой jsfiddle, чтобы показать пример

JsFiddle

источник

2015-02-12 19:04:18

Спасибо. Это точно. Я принимаю ваш ответ, когда вы дали правильное объяснение. – Sam

Использование top указать интервал не является хорошей идеей, в таком случае, как это. Он будет хрупким. Пусть элементы освобождают место для себя и позволяют коробке модели сделать пространство в родительском. Для этого вместо этого используйте margin-top.

Fiddle: http://jsfiddle.net/markm/rmvneo88/

источник

2015-02-12 19:03:14

Ну нет необходимости в положении относительно, во всех дочерних дивы, просто удалите эти теги.

источник

2015-02-12 19:06:49 Favo