Я не могу управлять позиционированием divs в css и html

#html #css

#HTML #css

Вопрос:

я создаю веб-сайт и добавляю divs. проблема в том, что мой основной div, который является контейнером, не отслеживает количество divs внутри него. divs внутри него продолжает накладываться на него и не следует за контейнером. помогите мне найти проблему. Спасибо. ниже приведен мой код:

для моего css:

 .container{
position: relative;
height: 100%;

margin: 0 auto;
width: 100%;
max-width: 1100px;
background-color: #fff;
-moz-box-shadow:    0px 0px 6px 7px #ccc;
-webkit-box-shadow: 0px 0px 6px 7px #ccc;
box-shadow:         0px 0px 6px 7px #ccc;

}

.cities{
position: relative;
top: 110px;

}

.top{
position: relative; 
top: 120px; left: 25px;
max-width: 500px;
}

для моего html:

         <div class="container" >

            <div class="cities">
                <p style="font-weight: bold; font-size: 18px;">Kwiktable Makati
                <a href="#" style="color: black; float: right; margin-right: 5px; ">Mandaluyong </a> <a href="#"style="color: black;float: right;margin-right: 5px; ">Pasig </a> <a href="#"style="color: black;float: right;margin-right: 5px; ">Quezon city </a> <a href="#"style="color: black;float: right;margin-right: 5px; ">Taguig </a></p>
            </div>
                <hr style="position: relative; top: 120px; width: 1060px; margin-right: auto; margin-left: auto;">
            <div class="top">
                <?php include'content1.html';?>
            </div>
            <hr class="middle" style="position: relative; top: -300px;"/>
            <div class="best">
                <h1 style="position: relative; width: 350px; left: 50px; height: 80px; color: #fff; text-shadow: 0px 0px 3px #000;"><span style="position: absolute; top: 20px; left: 40px">

                Kwiktable's Best!</span></h1>
                <?php include'best.php';?>

            </div>

вот что происходит: http://tinypic.com/r/o69qqe/8

1. перво-наперво, прекратите смешивать встроенные стили и таблицы стилей. переместите все в таблицу стилей, и вам будет легче. Что вы подразумеваете под .container «не следовать» за divs внутри него. Как вы хотите, чтобы это выглядело?

2. я хочу поместить изображение, но stackoverflow не позволит мне, они сказали, что мне нужно иметь не менее 10 очков репутации… в любом случае, я хотел, чтобы контейнер содержал все divs внутри него, поэтому всякий раз, когда я добавляю еще один div, контейнер будет только расширяться

3. Вещи перекрываются, потому что вы устанавливаете позиции друг над другом. Зачем явно позиционировать все?

4. я пытаюсь добавить html-страницы на свою страницу php. это своего рода хакерское замедление.

5. @user3690039 — если вы хотите добавить изображение, вы можете добавить URL-адрес изображения в текст вашего вопроса и добавить заметку с просьбой к пользователю с более высокой репутацией добавить его в вопрос от вашего имени.

Ответ №1:

Попробуйте расположить свои div с margin помощью and padding вместо top and left . Как есть, они занимают столько места, сколько было бы, если бы на них не было (позиционного) стиля. Так что дело не в том, что ваш .container не содержит, вы просто не можете сказать. Если вы вместо того, чтобы использовать top:125px use padding-top:125px , ваш контейнер будет расширяться. потому что контейнер будет видеть, что элемент занимает все это пространство. (execpt в случае поплавков, тогда вам нужно будет их очистить.)

Ответ №2:

используйте

position:absolute; top:100px; etc