Как заставить поплавки увеличить ширину? - PullRequest
Новая
       30

Как заставить поплавки увеличить ширину?

0 голосов
/ 14 июня 2011

У меня есть два элемента на странице.Один из них является основным контейнером контента, а второй - боковой панелью.То, что я пытаюсь сделать, это сделать так, чтобы боковая панель была выровнена в крайнее правое положение ВСЕ время - то есть в правой части экрана, независимо от разрешения экрана, и контейнер содержимого должен быть более или менее посередине страницы..

У меня есть главный контейнер, который содержит их оба.

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

Для интереса поле содержимого - 632px, а боковая панель - 272px.

Итак, следующее, что я попробовал, было floating каждый из этих элементов справа& используя margin-left "процент" 10%.Это, очевидно, остановило перекрытие;однако теперь, когда разрешение уменьшается до такой степени, что оно не может содержать элемент содержимого, поле и боковая панель элемента содержимого теперь опускаются ниже содержимого боковой панели.

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

Ответы [ 3 ]

1 голос
/ 14 июня 2011

Ваш вопрос немного двусмысленный; но я думаю, что самое простое решение - обернуть в обертку как основное содержимое, так и боковую панель и придать обертке фиксированную ширину. Плавающее основное содержание слева и боковая панель справа, и вуаля ! Обратите внимание, что это будет отображаться одинаково практически на любом размере экрана и не будет изменять его размер, но CSS3 Media Queries полезны для изменения размера проблем.

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

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

1 голос
/ 14 июня 2011

Если я правильно вас понимаю, это следует сделать:

CSS: 

/* Pseudo CSS reset */
* { padding:0; margin:0; }

#containerOuter {
    position:absolute;
    width:100%;
    height:100%;
}
#containerInner {
    display:table;
    width:100%;
    height:100%;
}

#hiddenSidebar {
    display:table-cell;
    width:272px;
}

#contentOuter {
    display:table-cell;
    background-color:#999999;
    min-width:632px;
    height:100%;
}

#contentInner {
    margin-left:auto;
    margin-right:auto;
    background-color:#888888;
    width:632px;
    height:100%;
}

#sidebar {
    display:table-cell;
    width:272px;
    min-width:272px;
    background-color:#777777;
}

HTML: 

<div id="containerOuter">
    <div id="containerInner">
        <div id="hiddenSidebar"></div>
        <div id="contentOuter">
            <div id="contentInner">Content</div>
        </div>
        <div id="sidebar">Right Sidebar</div>
    </div>
</div>
1 голос
/ 14 июня 2011

Чтобы реализовать мое решение вашей проблемы, вам нужно немного изменить свой HTML: 

<div id="container">
    <div id="main">
    ...
    </div>
</div>
<div id="sidebar">
   ...
</div>

CSS: 

* { margin: 0; padding: 0; } /* Or your favorite CSS reset to ensure that your body/html tag has no margin or padding */
#container { float: left; width: 100%; margin: 0 -272px 0 0; }
#main { float: right; width: 632px; }
#sidebar { float: right; width: 272px; }

Я создал скрипка , чтобы показать вам, что я опубликовал (обратите внимание, что я изменил значения, чтобы они помещались на крошечном экране предварительного просмотра).

...