CSS DIVs Break On Zoom

0

Я боролся с этим уже более 4 часов, и я не могу понять это. Обычно, когда я проектирую сайт, у меня всегда есть его центр, поэтому я никогда не сталкиваюсь с проблемами, из-за которых divs выходят из макета.

ВОПРОС 1

У меня есть боковая панель слева, а затем блок контента, а затем боковая панель справа. Каждая боковая панель должна быть шириной 180 пикселей, а блок содержимого должен заполнять пустое пространство между этими двумя боковыми панелями.

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

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

ВОПРОС 2

Блок div в заголовке должен автоматически располагаться между двумя логотипами, подобно тому, что мне нужно для content_wrapper, как я могу это сделать?


Может кто-то мне помочь, пожалуйста?

благодаря

HTML

<div id="header">
    <div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
    <div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
    <div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
    <div id="left_sidebar" class="sidebar">Left Sidebar</div>
    <div id="middle_content">Middle Content</div>
    <div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>

CSS

html,body {
    height:100%;
}

body {
    background-image: url('../bg.jpg');
}

#header {
    width: 100%;
    border: solid 1px;
    overflow: hidden;
}

.logo {
    width: 180px;
    height: 180px;
    background-image: url('../avatar.jpg');
    border: solid 1px;
}

#block {
    border: solid 1px;
    float: left;
}

#left_logo {
    float: left;
}

#right_logo {
    float: right;
}

#content_wrapper {
    width: 100%;
}

.sidebar {
    width: 180px; 
    float: left;
}

#middle_content {
    min-height: 500px; 
    width: 100%; 
    float: left;
}
Теги:

1 ответ

0

Следует отметить несколько моментов

  • переместите #right_sidebar перед #middle_content
  • #right_sidebar должен плавать прямо не слева
  • #middle_content не должен плавать и не иметь width: 100%
  • если вы хотите иметь #middle_content в своем собственном столбце, то есть не плавать под левой и правой боковой панелью, добавить margin-left и margin-right

То же самое относится к #header.

См. JSFiddle, как это может выглядеть.

Хотя ему несколько лет, есть хороший обзор основных схем компоновки с CSS на http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

  • 0
    Спасибо вам большое!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню