2012-04-17 4 views
0

Я разработал веб-страницы с 3-мя колоннами, расположенными так:страница выглядит больше, чем он должен

[[влево] [содержание] [право]]

и он показывает, как это:

[[слева]             [право]]
      [содержание]

wehn I ctrd + прокрутить вниз, это выглядит нормально, как я могу это исправить?

КНБ:

.advert_panel_right{ 
width:250px; 
height:100%; 
float:left; 
} 

.advert_panel_left{ 
    width:250px; 
    height:100%; 
    float:right; 
} 

.content_wraper{ 
    width:902px; 
    margin: 0px auto; 
} 

.content{ 
    font-family: Verdana, Geneva, sans-serif; 
    width:100%; 
    margin-left:25px; 
} 
+0

И HTML есть ....? – mrtsherman

+3

Обратите внимание, что ctrl + scroll down - это самый яркий ярлык браузера (если вы используете колесо мыши) для уменьшения масштаба. Это означает, что вы, вероятно, увеличены с самого начала. В браузере перейдите в Инструменты-> Настройки-> Масштаб-> Сброс или эквивалентные настройки. –

+0

И у вас есть фиксированная спецификация ширины 1427 пикселей (250 на каждом конце для боковой панели содержимого и 902 + 25 для самого содержимого. Если ваш видовой экран меньше этого (или у вас есть полоса прокрутки), ваш контент –

ответ

1
.content_wraper{ 
    width:802px; 
    margin: 0px auto; 
} 

делает сокращение ширины обертки помогает? Я верю, что он слишком велик.

+0

Это помогло! Большое спасибо :) – RicardoE

+0

+1 если это помогло? –

2

Пример: http://jsfiddle.net/GN8RL/

HTML

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="content"></div> 
    <div id="right"></div> 
</div> 

CSS

#left, #content, #right { 
    float:left; 
    height:100px; 
    border:1px solid red; 
} 

#left, #right { 
    width:100px; 
}  
#content { 
    width:200px; 
} 
#wrapper { 
    width:406px; /* 400 + borders */ 
    margin:0 auto; 
} 

+0

410px? Я бы сказал, 406 (200 + 100 + 100 + 2x3). Также я не думаю, что ваш ответ уместен. У него проблемы с его кодом. Вы просто приводите пример подобного, хотя и не совсем того же, случая. –

+0

Брэм, я помогаю парням. он хотел сделать именно это, я создал для него этот пример, его 3 колонки, которые он хотел, простые и чистые. Я предпочитаю больше информации, чем недостаточно, теперь у него есть несколько вариантов. Пожалуйста, удалите свой отрицательный комментарий, я изменил 410 на 406. Он также принял мой ответ. –

+0

Правда, извините. По-моему, я должен был быстро сообразить. Я все же думаю, что вы действительно не отвечали на вопрос.У него возникают особые проблемы с его выкладкой и его дизайном (ширина 902 пикселя, 25 полей и все такое). Ваш пример простой и простой, как создать три столбца, но не более того. –

0

мне нужно изменить некоторые вещи (и опечатка), но вот тест , Прекрасно работает: http://jsfiddle.net/UZfBc/

Прежде всего: плавайте правую панель вправо и левую панель влево. Избавьтесь от типографии 'content_wraper'. Я предположил, что .content является средним div и что .content_wrapper является оберткой.

Ваш .content НЕ МОЖЕТ быть 100% -ной ширины, так как он берет значение своего родителя и использует его. Это означает, что у вас есть три div, соответственно 250px, 902px (+ 25px margin) и 250px, которые вы хотите поместить в один div из 902px. Это никогда не сработает. Просто вычислите размер div .content: 902 - 250 - 250 - 25 = 377px. Тогда пусть это float: left;. Он будет работать (как в моем примере)

Смежные вопросы