Как я могу остановить эти div'ы от наложения?

У меня есть три div, в пределах содержимого div.

Ширина контейнера 70%. В том, что у меня есть  -Левый, ширина 20%.  Содержание, ширина 60%.  -Право, ширина 20%.

Я хотел бы, чтобы контейнер занимал 70% ширины страницы, а внутренние (слева, содержимое и справа) занимали 20%, 60% и 20% от деления контейнера.

Здесь я пробовал другие вопросы, я пробовал Google, но, похоже, не могу найти правильный ответ. Пожалуйста, помогите мне остановить их наложение.

Maximized Browser

Но когда я изменяю размер браузера, элементы div пересекаются. Как это:

Re-sized Browser

Вот соответствующий код CSS:

#container{
    width: 70%;
}
#left {
    float: left;
    width: 20%;
    min-width: 200px;
}
#content {
    float: left;
    width: 60%;
    min-width: 600px;
}
#right {
    float: right;
    width: 20%;
    min-width: 200px;
}
 Raab12 июн. 2012 г., 08:29
добавить HTML, а также
 Neji12 июн. 2012 г., 08:31
создать скрипку плз
 Taha Paksu12 июн. 2012 г., 08:29
после достижения их минимальной ширины они больше не могут сжиматься, что вызывает наложение. Единственный способ использования min-width - предотвратить изменение размера пользователя после определенной суммы :)

Ответы на вопрос(6)

Вместо того, чтобы даватьmin-width ребенка DIV, вы можете дать его#container, Напишите так:

#container{
    width: 70%;
    min-width:1000px;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

Проверь этоhttp://jsfiddle.net/yLVsb/

min-width из вашего CSS.

Когда размер страницы меньшеmin-width останавливает его от дальнейшего сокращения. Таким образом вызывая перекрытие.

Решение Вопроса

min-width от вашего CSS! И датьmin-width в контейнер сmargin: auto сделать это центром.

Попробуйте этот CSS:

#container{
    width: 70%;
    min-width: 1000px;
    margin: auto;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

Проверьте скрипку здесь:http://jsfiddle.net/UaqU7/2/

Здесь вы идете, если вы хотите минимальную ширину, установите его на контейнере

http://jsfiddle.net/VBSYu/1/

#container{
    width: 70%;
    min-width: 1000px;
}
#left {
     float: left;
     width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}​

Выньте CSS минимальной ширины.

Как только ширина окна становится меньше определенного размера, у этих элементов нет другого выбора, кроме как перекрываться. Допустим, ваше окно 1000 пикселей; тогда контейнер будет 700px. Но с минимальной шириной, div в контейнере уже в 1000px, переполняя контейнер.

 12 июн. 2012 г., 09:11
@ Джош М, вот твой ответ ..

Вот скрипка работает нормальноhttp://jsfiddle.net/r42hH/2/

Ваш ответ на вопрос