2 столбца деления: фиксированный и жидкий.Фиксированный должен быть съемным.Жидкий должен быть первым в коде

Question

Рассмотрим следующую структуру HTML с 2 столбцами:

<div id="container">
    <div class="left">some text</div>
    <div class="right">some text</div>
</div>

CSS:

#container { overflow: hidden; }
.left { float: left; width: 200px; background: red; }
.right { overflow: hidden; background: green; }

Тот же код в jsFiddle - http://jsfiddle.net/vny2H/

Итак, у нас есть 2колонны.Ширина левого столбца фиксирована, ширина правого - жидкая.Если мы удалим левый столбец из html, правый столбец растянется до 100% ширины родительского #container.

Вопрос: можем ли мы изменить порядок левого и правого столбцов?(Мне это нужно для SEO)

<div id="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

Спасибо.

---

Добавлено

Есть один интересный способ достичь того, что я хочу, но фиксированный столбец становится несъемным,Метод основан на отрицательной марже.http://jsfiddle.net/YsZNG/

HTML

<div id="container">

    <div id="mainCol">
        <div class="inner">
            <p>Some text</p>
            <p>Some text</p>
            <p>Some text</p>
            <p>Some text</p>
        </div><!-- .inner end -->
    </div><!-- .mainCol end -->

    <div id="sideCol">
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
    </div><!-- .sideCol end -->

</div><!-- #container end -->

CSS

#container { overflow: hidden; width: 100%; }

#mainCol { float: right; width: 100%; margin: 0 0 0 -200px; }
#mainCol .inner { margin: 0 0 0 200px; background: #F63; }

#sideCol { float: left; width: 200px; background: #FCF; }

Таким образом, у нас есть 2 способа:

1. Использование «float» дляисправлена ​​колонка и «переполнение: скрыто» для жидкости.Фиксированная колонка становится съемной.Но ликвидный идет вторым в коде.
2. Использование отрицательного поля.Жидкий столбец идет первым в коде.Но фиксированный нельзя удалить.

Есть ли третий способ, когда фиксированный столбец является съемным, а жидкий - первым в коде?

---

Добавлено

Половина решения была предложена @lnrbob.Основная идея - использование табличных div-ов.http://jsfiddle.net/UmbBF/1/

HTML

<div id="container">
    <div class="right">some text</div>
    <div class="left">some text</div>
</div>

СSS

#container { display: table; width: 100%; }
.right { display: table-cell; background: green; }
.left { display: table-cell;  width: 200px; background: red; }

Этот метод подходит, когда фиксированный столбец размещается справа на сайте.Но если нам это нужно слева - кажется, это невозможно сделать.

Answer 1

Подумайте о семантике контента, который вы размечаете, прежде всего, что почти всегда приведет к решению, имеющему как приличную разметку, так и дружественную для поисковых систем.

Например, .rightосновное содержание страницы, а .left какая-то дополнительная информация или навигация?В этом случае, отметьте его как таковой, и поисковые системы сделают хорошую работу, интерпретируя это так, как вы хотите.HTML5 предоставляет множество элементов именно для этой цели:

<div id="container">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">etc.</a></li>
        </ul>
    </nav>
    <article>
        <h1>My nice, juicy content</h1>
        <p>Cool stuff, huh?!</p>
    <article>
</div>

Или для дополнительного контента вы можете рассмотреть <aside> или просто <div role="supplementary">.

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

Answer 2

Поскольку ваши элементы имеют одинаковую высоту, вы можете сделать это:

#container { overflow: hidden; position:relative; }
.left { float: left; width: 200px; height: 200px; background: red; position:absolute; top:0; left:0; }
.right { overflow: hidden; height: 200px; background: green; margin-left:200px;}

Страница скрипки: http://jsfiddle.net/Ptm3R/9/

Answer 3

Я все еще думаю, что это довольно бессмысленное начинание, потому что единственная причина, по которой стоит попробовать, - сомнительные преимущества SEO. Но меня так много раз тянуло к этому вопросу, что я собираюсь принести что-то на стол.

Если я был вынужден под страхом смерти придумать чистое решение CSS, вот оно - но я не рекомендую его:

http://jsfiddle.net/RbWgr/

Магия transform: scaleX(-1);. Это применяется к .container, чтобы перевернуть визуальный порядок, а затем также к дочерним div s, чтобы содержимое каждого div не было перевернуто.

• Это не будет работать в IE7, потому что я использую display: table-cell.
• В IE8 не так жарко - любой текст выглядит ужасно, как обычно с filter с. Но это работает.
• Дополнительные div обертки были необходимы, чтобы он работал в Opera - и текст не выглядит идеально.

Он фантастически работает в других современных браузерах (IE9, Chrome, Safari, Firefox), но применение transform s к родительскому элементу «каждого элемента» может иметь непредвиденные последствия.

Answer 4

Если честно, я не уверен, почему вы сводите это к необходимости использовать только два идентификатора ([#left / #right] ИЛИ [ # mainCol / # sideCol]) ...

Не будет ли намного проще использовать решение mainCol / sideCol, которое вы использовали в JSFiddle на http://jsfiddle.net/YsZNG/, и ввести третий класс, который можно применить к основномуdiv в отсутствие sideCol программно.

Как и в http://jsfiddle.net/biznuge/aAE3q/4/

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

ОБНОВЛЕНИЕ

Теперь я дал второй ответ на этот вопрос, который, как мне кажется, работает.Извините за двойной ответ, но мне показалось, что он сильно отличается от моего первоначального ответа, и я подумал, что он встанет на свои ноги.

Answer 5

Как насчет того, чтобы поместить левый столбик внутри правого нижнего?

http://jsfiddle.net/vny2H/32/

Answer 6

http://jsfiddle.net/biznuge/aAE3q/12/

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

ОБНОВЛЕНИЕ

Протестировал это в FireFox (4), IE (9), Opera (11), Safari (5) [Win] и Chrome (12), и раскладка кажется надежной во всех браузерах.

Довольно удивительно на самом деле ...

ОБНОВЛЕНИЕ ПО СЛЕДУЮЩЕМУ РАЗЪЯСНЕНИЮ

благодаря @thirtydot зачто

http://jsfiddle.net/biznuge/aAE3q/19/

Работает ТОЛЬКО в Firefox 4, насколько я могу судить, после некоторой краткой проверки ... Но это начало ...

Answer 7

Зависит от требований вашего браузера.Для IE8 и выше (и всех современных браузеров) вы можете использовать display: для установки макета таблицы (все еще используя ваши <div />, конечно.)

Вот пример -Я только добавил javascript, чтобы вы могли переключать, скрыт элемент или нет:)