Разделы Div сдвигаются, когда я изменяю размер окна - PullRequest
0 голосов
/ 21 мая 2009

Я поместил 2 div рядом, один содержит логотип, а второй содержит текстовые поля. Когда я смотрю эту страницу в большем разрешении, все в порядке. Но когда я изменяю размер окна, второй div также становится дерьмовым и становится ниже первого div.

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

Ответы [ 5 ]

4 голосов
/ 21 мая 2009

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

<div id="wrapper">
    <div id="logo">...</div>
    <div id="text">...</div>
</div>

стиль для него будет:

#wrapper { width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { width: 780px; }

что-то в этом роде. если кто-то изменит размер окна на 980 пикселей (или использует более низкое разрешение экрана), вы получите горизонтальную прокрутку.

// редактировать в ответ на комментарий вы можете использовать минимальную ширину, чтобы сделать его более гибким. будет вызывать IE

#wrapper { min-width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { min-width: 780px; }

min-width не поддерживается IE6, поэтому вам может потребоваться исправить это.

0 голосов
/ 12 мая 2014

Просто ваши 10px (margin-left + margin-right) больше чем 1%. Это должно работать:

#Content {
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left;
}

#ContentLeft {
margin-left: 1%; 
float: left; 
width: 19%;
}

#ContentMain {
width: 79%; 
margin-right: 1%; 
float: right;
}
0 голосов
/ 29 августа 2013

Я пытался сохранить общее значение ширины на 1% меньше (1% не используется) от общего количества обоих элементов div .... мне кажется, что это работает :) Myabe, это кому-то полезно.

CSS:

#Content {
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left;

}
#ContentLeft {
margin-left: 5px; 
float: left; 
width: 19%;
}

#ContentMain {
width: 80%; 
margin-right: 5px; 
float: right;
}

HTML:

<html>
<body>
<div id="Content">
<div id="ContentLeft">Left menu</div>
<div id="ContentMain">Here goes the bigger content</div>
</div>
</body>
</html>
0 голосов
/ 21 мая 2009

второй div скользит под первым, потому что в контейнере недостаточно ширины, чтобы они могли располагаться рядом

Это можно исправить двумя способами:

  1. изменить свойство «переполнение» узла контейнера на «скрытое» (или даже переполнение).
  2. Установите минимальную ширину контейнера. Этот подход, однако, страдает от специальных взломов, необходимых для IE. Кроме того, подход минимальной ширины обычно не может быть сделан внезапно. Это должно быть запланировано с самого начала оформления страницы.

Надеюсь, это поможет.

ура!

0 голосов
/ 21 мая 2009

В основном второму div нужно куда-то идти, если он не подходит. В вашем случае единственный вариант - обрезать, поэтому оберните строку в div с переполнением: hidden.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...