Фиксированные и жидкостные колонны

0

Поэтому я пытаюсь создать веб-страницу с полной шириной, что, когда браузер масштабируется от большого дисплея до носителя, сводная панель сворачивается, а когда дисплей представляет собой ширину основного содержимого, боковая панель падает ниже содержимого (I ' объясню с картинками).

Я создал этот JSFiddle: http://jsfiddle.net/7N2Jr/2/

В нем есть фиксированная боковая панель - основная навигация. Также есть div.inside который содержит все содержимое. <article class="one"> содержит основной контент (новостная статья), а <article class="two"> будет содержать связанные сообщения, рекламные объявления и т.п.

То, что я намереваюсь создать (извините, что скрипка не достаточно велика, чтобы показать это):

  • header остается того же размера.
  • <article class="one"> Article <article class="one"> будет иметь ширину 920px или 46em (на основе 20px). Он будет оставаться этой шириной, пока окно браузера не станет 46 или меньше.
  • <article class="two"> заполнит оставшуюся часть браузера рядом с <article class="one">. Когда ширина <article class="two"> достигает определенной ширины, она будет отбрасывать содержимое в один столбец. Тогда, когда ширина равна 46em, она опустится ниже содержимого.

Изображение 174551

Изображение 174551

Изображение 174551

Изображение 174551

Изображение 174551

  • 0
    Я бы предложил поискать «адаптивный веб-дизайн» и изучить основы работы медиа-запросов и т. Д.
  • 0
    @JamesKing Я знаю, как использовать «адаптивный веб-дизайн». Вы, вероятно, не собирались казаться странным, но это было так. Посмотрите на мой ответ, чтобы увидеть, как я это сделал.
Теги:

4 ответа

0
Лучший ответ

Вот обновление моего JSFiddle: http://jsfiddle.net/7N2Jr/6/

После некоторого возиться, он добрался туда.

Затем, когда изображения снижаются вправо, в основном тексте я буду использовать media-query для удаления margins

Поделиться
1

Проверьте Bootstrap 3.0, он обеспечивает все, что вы ищете!

в качестве примера: в этом случае ваш HTML-код будет выглядеть так:

<div id='text' class='col-lg-6 col-sm-8 col-xs-12'>
   put your text here
</div>
<div id='images' class='col-lg-6 col-sm-4 col-xs-12'>
   <div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
   <div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
</div>

Bootstrap использует сетку с 12 столбцами. Для разных размеров экрана (например, LG, SM, XS) вы можете определить, сколько из этих столбцов занимает DIV в этой сетке.

Поделиться
  • 0
    Если честно, не фанат Bootstrap. Я думаю, что это одна из тех вещей, которые «выросли без этого, никогда не нуждались». Я все понял, хотя.
  • 0
    вы всегда можете просто взять масштабируемую часть, которую они используют, и «нарезать» ее для своего собственного использования ... @media (max-width: 700px) {. inside {width: 200px; float: left; whaterever ...}}.
Показать ещё 1 комментарий
0

<edit> Вы можете использовать float как flexbox для flexbox http://jsfiddle.net/7N2Jr/8/ </edit>

Если вы не против использования flexbox, для более молодого браузера вы можете попробовать: DEMO

.inside, article.two{
    display:flex;
    padding:1em;
    flex-wrap:wrap;
}
.inside, article {
    background:rgba(0,0,0,0.3);
    margin:1em;
}
article.one {
    flex:3;
    min-width:800px;
}
article.two {
min-width:200px;
}
.filler {
    min-width:200px;
    min-height:80px;
    margin:auto;
    background:black;
    margin:1em;
    align-self:flex-start;
    flex:1;
}

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

bootstrap можно использовать как резерв для браузера, который не применяет правила flex.

Поделиться
  • 0
    Я думал о гибкой коробке, но IE - моя главная проблема. Если бы он вернулся к IE8 (это самый низкий показатель), то я был бы прав.
  • 0
    Тогда у вас есть только плавающие и разметка, чтобы помочь вам jsfiddle.net/7N2Jr/7
Показать ещё 1 комментарий
0

Как и выше, попробуйте вместо этого использовать платформу bootstrap.

Однако, если вы этого не хотите, тогда просто читайте о медиа-запросах. Вы можете начать здесь: http://css-tricks.com/css-media-queries/

Поделиться
  • 0
    Я собирался использовать медиа-запросы, чтобы опустить боковую панель, когда это необходимо. Посмотрите на мой ответ, чтобы увидеть, как я все исправил :)

Ещё вопросы

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