CSS: две колонки с 50% текучей средой без учета минимальной ширины - PullRequest
Новая
       35

CSS: две колонки с 50% текучей средой без учета минимальной ширины

8 голосов
/ 10 октября 2008

Я пытаюсь использовать этот макет с двумя столбцами шириной 50%. Но кажется, что когда правый столбец достигает минимальной ширины, он проходит под левым столбцом. Есть ли способ использовать технику 'shim', чтобы установить минимальную ширину для оболочки, чтобы оба столбца перестали изменять размер. Таким образом, устраняется проблема с нахождением правого столбца под левым столбцом.

Моя страница выглядит следующим образом. 

<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
}

</style>

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
    <div class="minwidth">&nbsp;</div>
</div>

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

Есть ли другой способ получить два столбца шириной 50% и использовать прокладку для правильной установки минимальной ширины?

Спасибо.

Редактировать: Пробелы в классе minwidth на самом деле & nbsp, но они были преобразованы. ;)

Ответы [ 8 ]

6 голосов
/ 23 октября 2008

Мне удалось предложить решение «Таблицы HTML не требуются», основанное на методике Стю Николса из CSS Play, и мне лично это нравится, потому что оно работает не только в IE6 + и FF2 +, но и в CSS. это не требует никаких взломов. Мой аргумент о том, почему макет на основе CSS предпочтительнее таблиц HTML, см. Ниже.

Во-первых, я рекомендую, чтобы при разработке новых страниц с помощью CSS вы делали это в совместимом со стандартами режиме браузера . Чтобы узнать о режиме совместимости и стандартах, посмотрите эту статью на одном из моих любимых сайтов CSS-ресурсов. Все, что вам нужно сделать, это добавить определенный элемент DOCTYPE вверху ваших страниц. Затем CSS будет вынужден выполнять рендеринг в режиме соответствия стандартам, что приведет к уменьшению количества ошибок и особенностей браузера. В случае, если вы не можете переключиться в режим соответствия стандартам, для браузеров в режиме quirksmode доступно решение минимальной ширины, также доступное в CSS Play.

Во-вторых, вы должны добавить дополнительную обертку вокруг существующей разметки. Эта обертка используется для установки минимальной ширины для браузеров, которые понимают минимальную ширину (не IE). Затем вы можете использовать трюк * html, чтобы специально нацелиться на IE 6 и применить технику Стю Николла к внутренним оберткам. Методика подробно описана здесь, а конкретный используемый пример - «# 2 для IE в режиме соответствия стандартам»:

http://www.cssplay.co.uk/boxes/minwidth.html

Конечный результат довольно прост. Он создает 2 столбца по 50%, используя стиль 2-столбца ALA , упомянутый в исходном вопросе, с общей минимальной шириной (в данном примере 500 пикселей), где размер столбцов перестает изменяться, а правый столбец не упасть ниже левого столбца. Надеюсь, это поможет!

Редактировать: Этот же метод можно использовать для применения кросс-браузерной минимальной ширины к чему угодно. Например, столбцы не обязательно должны составлять 50% каждый, и можно использовать любое количество столбцов. http://www.glish.com/css/ является отличным ресурсом для макетов страниц на основе CSS, и в сочетании с этой техникой минимальной ширины есть много хороших макетов, которые можно создавать с минимальным допустимым CSS. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">

        /* For browsers that understand min-width */
        .width {
            width: 100%;
            min-width: 500px;
        }

        /* IE6 Only */
        * html .minwidth {
            border-left: 500px solid white;
            position: relative;
            float: left;
        }

        /* IE6 Only */
        * html .wrapper {
            margin-left: -500px;
            position: relative;
            float: left;
        }

        .left {
            float: left;
            width: 50%;
        }

        .right {
            float: left;
        }

    </style>
</head>
<body>

<div class="width">
    <div class="minwidth">
        <div class="wrapper">
            <div class="left">
                Left
            </div>
            <div class="right">
                Right
            </div>
        </div>
    </div>
</div>

</body>
</html>

Теперь, моим стимулом для создания учетной записи переполнения стека была возможность ответить на следующее предложение: «Если вы хотите два столбца, используйте таблицу, а не пытайтесь заставить Div вести себя как таблица». Поскольку я слишком новичок, чтобы либо комментировать, либо голосовать против, я дополняю это обсуждение.

Действительно

Кто-то задает вопрос о макетах на основе CSS, а вы отвечаете, что им нужно использовать таблицы HTML?

Позвольте мне начать с того, что я не считаю, что таблицы HTML совершенно не нужны. Фактически, в любое время мне нужно отобразить табличные данные, , т.е. реляционные данные , я использую таблицу HTML. Свойства отображения таблицы CSS еще не полностью поддерживаются (скоро появятся в IE8!), И использование одноуровневой таблицы HTML является эффективным решением. Посмотрите на разметку для любой из веб-страниц Google, и вы увидите, что они согласятся.

Как человек, который потратил много времени на написание CSS-макетов, совместимых с браузерами, когда мог бы сделать это за 10 минут, используя таблицу, я согласен с тем, что существует более простое решение этой проблемы. Однако то, что вы можете использовать динамит для ремонта вашей кухни, не означает, что вы должны это делать. В следующей статье подробно объясняется, почему макеты на основе CSS более желательны.

http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/

1 голос
/ 26 октября 2009

Вот хороший пример того, что вы хотите, я думаю.

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Короче вот CSS: 

/* Start of Column CSS */
#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#ffa7a7; /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:#fff689; /* column 1 background colour */
}
#col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

Вот HTML: 

<div id="container2">
    <div id="container1">
        <div id="col1">
            <!-- Column one start -->
            <h2>Equal height columns</h2>
            <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>

            <h2>Valid XHTML strict markup</h2>
            <p>The HTML in this layout validates as XHTML 1.0 strict.</p>
            <!-- Column one end -->
        </div>
        <div id="col2">
            <!-- Column two start -->
            <h3>Windows</h3>
            <ul>
                <li>Firefox 1.5, 2 &amp; 3</li>
                <li>Safari</li>
                <li>Opera 8 &amp; 9</li>

                <li>Explorer 5.5, 6 &amp; 7</li>
                <li>Google Chrome</li>
                <li>Netscape 8</li>
            </ul>


            <!-- Column two end -->
        </div>
    </div>
</div>
1 голос
/ 10 октября 2008

Попробуйте это: 

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">

.floatme {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
    clear: both;
}

</style>


<body>
<div id="wrapper">
    <div class="floatme">
        left
    </div>
    <div id="floatme">
        right
    </div>
    <div class="minwidth"> </div>
</div>
</body>
</html>
1 голос
/ 10 октября 2008

Это быстрая попытка, но она работает (проверено только в Firefox): 

<head>
<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    min-width: 500px;
    background:#eee;
    height: 0;
    overflow:visible;
}
.col{
    min-width:250px;
    background:#eaa;
}

</style>
</head>
<body>
<div id="wrapper" class="minwidth">
    <div id="left" class="col">
        left
    </div>
    <div id="right" class="col">
        right
    </div>
    <div><!-- Not needed --></div>
</div>
</body>
1 голос
/ 10 октября 2008

Просто установите минимальную ширину для оболочки и просто измените левый и правый столбцы на проценты. Это предотвратит сдвиг ваших двух столбцов в / над / под друг другом.

1 голос
/ 10 октября 2008

Попробуйте это для стиля: 

.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }
0 голосов
/ 14 октября 2009

Ну, я не хочу вступать в политический спор, но рассуждения в цитируемой статье Агудзварда о том, «почему CSS лучше таблиц», имеют мало общего с таблицами. Это демонстрирует то, что CSS лучше, чем использование отдельных тегов шрифта и настроек цвета и т. Д. Снова и снова, когда многие элементы страницы требуют одного и того же стиля. Да, я абсолютно согласен с тем, что если у вас есть сто элементов на странице, которые все должны быть зеленого цвета, 14pt, текст Arial, то имеет смысл создать для этого стиль CSS, а не копировать и вставлять тег шрифта снова и снова. по всем причинам, которые они дают. Это удваивается, если вы хотите использовать один и тот же стиль на нескольких страницах.

Но какое это имеет отношение к таблицам?

Кажется, что рассуждения таковы: «CSS хорош, потому что он позволяет указывать шрифт и цвет один раз, а не многократно, поэтому все, что можно сделать с помощью CSS, лучше любой возможной альтернативы». Ну, это не следует вообще! Тот факт, что инструмент подходит для одного типа проблем, не означает, что он подходит для всех возможных проблем. Молотки отлично подходят для нанесения гвоздей. Это не значит, что я использую их, чтобы вставить винты. Если я могу сделать разметку более просто и логично с таблицами, чем с тегами div и CSS, то настаиваю на том, что я все же должен использовать CSS, потому что «CSS хорош» оставляет меня сказать: ну и что?

0 голосов
/ 10 октября 2008

Используйте таблицу из 2 столбцов. Это будет делать именно то, что вы хотите. Предполагается, что элементы Div используются для простого разделения логически различных блоков, а таблицы предназначены для размещения столбцовых данных Если вам нужны два столбца, используйте таблицу, а не пытайтесь заставить Div вести себя как таблица.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...