Вопросы Теги

Стилизация dl и dt с помощью CSS для имитации табличного представления

У меня возникли следующие проблемы с использованием CSS для стилизации некоторых элементов dlи dt. Я предпочитаю всегда использовать очень простой CSS, совместимый с IE6/IE7 и современными браузерами. Я пытаюсь добиться эффекта, который для меня должен быть довольно простым.

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

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <style type="text/css">

        .terms dl {
            float: left;
            padding-left: 0px;  
        }

        .terms dt, .terms dd {
            text-align: center;
            margin: 0px;
            float: left;
        }

        .terms dt {

            border: solid blue 1px;
            clear: left;    
        }

        .terms dd {
            border: solid red 1px;
            margin-right: 40px;
            margin-left: 40px;
        }

        </style>
    </head>
    <body>
        <div class="terms">
            <h1>Terms</h1>
            <dl>
                <dt>Term 1:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 2:</dt>
                <dd>Definition for term</dd>

                <dt>Term 3 with longer term title:</dt>
                <dd>Definition for term</dd>

                <dt>Term 4:</dt>
                <dd>Definition for term</dd>

                <dt>Term 5:</dt>
                <dd>Definition for term</dd>

                <dt>Term 6:</dt>
                <dd>Definition for term</dd>
            </dl>
            <dl>
                <dt>Term 7:</dt>
                <dd>Defintion for term</dd>

                <dt>Term 8:</dt>
                <dd>Definition for term</dd>

                <dt>Term 9:</dt>
                <dd>Definition for term</dd>

                <dt>Term 10:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 11:</dt>
                <dd>Definition for term</dd>

                <dt>Term 12:</dt>
                <dd>Definition for term</dd>
            </dl>
        </div>
    </body>
</html>

Вот визуальный результат. Я стилизовал синие и красные границы так, чтобы их было легче визуализировать:

enter image description here

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

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

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

Кроме того, это связанный, но отдельный вопрос. Если изменить размер окна браузера с таблицей, вы ожидаете, что часть таблицы перестанет быть видимой, когда вы уменьшите ширину. С этой настройкой вы получите очень странный и уродливый результат, как показано ниже.Как этого избежать?

enter image description here

ОБНОВЛЕНИЕ

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

9
задан Brian Tompsett - 汤莱恩 27 February 2018 в 08:47
поделиться