Блог

Главная - Вопросы по программированию - выровнять div в нижнем колонтитуле по другому div

выровнять div в нижнем колонтитуле по другому div

#html #css

#HTML #css

Вопрос:

Я застрял с этим, это проблема

 <div id="example1">
    <div id="example2"> </div>
    <div id="example3"> </div>
</div>

Мне нужно выровнять div по идентификатору example3 в примере 2 и, если это возможно, просто в нижнем колонтитуле и в центре div с идентификатором example1 . как я могу это сделать?? у меня есть дни попыток и больше похоже на это.

CSS

 #example3{
margin-left:auto;
margin-right:auto;
margin:0;
height:80px;
position:absolute;
top:170px;
}


#example2{
height:153px;
width:305px;
float:left;
background:url(Logo.png);
}

спасибо за вашу помощь

Ответ №1:

Во-первых, position:absolute это не позволит вам устанавливать поля.

Во-вторых, у вас есть

 margin:0;

который сбрасывает ваш auto слева справа. Попробуйте

 margin:0 auto;

Вот JSFiddle, который выполняет то, что вы пытаетесь сделать (более или менее).

Редактировать

Хорошо, но теперь вы ввели третью проблему в float:left , которая переопределяет auto поле и всегда перемещается влево.

Кроме того, проблемы, о которых я упоминал выше, не были решены. Подводя итог: никаких плавающих значений, никаких абсолютных позиций, и постарайтесь не переопределять поле, стилизуя его дважды.

Вы пытаетесь сделать пробел размером 17 пикселей между #example2 и #example3 ? Вот обновленная ссылка, созданная по сравнению с предыдущей, которая выполняет это новое поведение: JSFiddle

Комментарии:

1. спасибо за вашу помощь, но я отредактировал вопрос и задал стиль div 2. я ищу свойство, которое я не знаю, является ли exit

Ответ №2:

Исходя из имеющегося у вас CSS, я думаю, вам нужно поменять местами div, который полностью расположен по отношению к «логотипу» (#example2), затем вы можете просто выделить верхнюю часть примера 3, чтобы получить верхний интервал в 170 пикселей

Пример: jsfiddle

попробуйте:

 #example1{
    background: #eee;
    height: 250px;
    position: relative;
    overflow: auto;
}

#example2 {
    background: #444;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    height:152px;
    width:305px;
}

#example3 {
    background: #007;
    color: #fff;
    width: 300px; /* adjust to suit */
    height: 80px;
    margin: 170px auto 0 auto;
}

если вы не знаете ширину #example3 — и поэтому не можете использовать auto левое и правое поля — тогда вы можете центрировать его другим способом, изменив его на display: inline-block и установив text-align: center на #example1