CSS: Две колонки с 50% - ной текучестью, не соответствующие минимальной ширине

ProgramBox

CSS: Две колонки с 50% — ной текучестью, не соответствующие минимальной ширине

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#internet-explorer #layout #css

Вопрос:

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

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

 <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">amp;nbsp;</div>
</div>

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

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

Спасибо.

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

1. Это происходит во всех браузерах? У меня есть макет портала, который блокируется IE, потому что он игнорирует минимальную ширину.

2. Я попытался изменить ваш на amp;amp;nbsp;, но парсеру это не понравилось. Похоже на ошибку в StackOverflow.

3. Почему бы вам просто не добавить минимальную ширину к самой обертке? Это работает для меня в каждом браузере, включая IE7 . IE6 все равно не поддерживает минимальную ширину.

Ответ №1:

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

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

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

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

Конечный результат довольно прост. Он создает 2 столбца на 50%, используя технику стиля ALA с 2 столбцами, упомянутую в исходном вопросе, которые имеют общую минимальную ширину (в этом примере 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. Это работает нормально, но только в том случае, если правый столбец содержит небольшой объем данных. Как только у вас будет больше, чем немного содержимого в правой колонке, оно завершится.

Ответ №2:

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

Ответ №3:

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

 <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>

Ответ №4:

Это быстрая попытка, но она работает (протестирована только в 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>

Ответ №5:

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

 .left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }

Ответ №6:

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

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;amp; 3</li>
                <li>Safari</li>
                <li>Opera 8 amp;amp; 9</li>

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


            <!-- Column two end -->
        </div>
    </div>
</div>

Ответ №7:

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

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

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

Ответ №8:

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

1. Являются ли левый и правый столбцы не отличительными блоками? Моя цель-использовать его в качестве макета, а не для отображения табличных данных. Напишите ответ, если я совершенно не прав. 😉 Спасибо.

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

3. Не волнуйся, Дэвид, я тебя понимаю. В наши дни слишком много любви только к CSS-верстке.

4. @Paolo, учитывая истинное зло, которое некоторые люди совершали с таблицами в прошлом, чтобы создавать красивые фоны и тому подобное, на самом деле неудивительно, что была полная реакция «никогда не используйте таблицы». Однако сейчас эта обратная реакция становится скучной, и нам нужно достичь хорошего баланса.

5. Люди набрасываются, потому что таблицы должны использоваться для табличных данных. Они никогда не должны использоваться в целях дизайна или презентации. Таблицы имеют свое применение, но только для табличных данных. Правильный способ создания любого макета-использовать divs для создания структуры.

Метки: CSS: Две колонки с 50% — ной текучестью, не соответствующие минимальной ширине