Альтернатива компоновке <table> в HTML

Прямо сейчас у меня есть веб-страница, настроенная на размер окна браузера с overflow:scroll пары overflow:scroll ее.

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

Моя страница (в двух словах):

<table>
<tr>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff1
            </div>
            <div>
                stuff1A
            </div>
        </div>
    </td>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff2
            </div>
            <div>
                stuff2A
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
           <input type="submit"><input type="submit"><input type=    "submit">
    </td>
    <td>
           <input type="submit"><input type="submit"><input type="submit">
    </td>
</tr>
<tr>
    <td>
    <textarea>stuff3</textarea></td>
    <td><select multiple>
        </select></td>
</tr>

По сути, проблема в том, что я хочу вложить <div> не помещая второй вложенный <div> в новую строку:

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div>
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div>

Я хочу, чтобы вышеуказанное отображало две прокручиваемые области на одной строке, и я не могу использовать <textarea> потому что текст должен быть нескольких цветов (см. Ссылку, предоставленную).

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

Ответы

Ответ 1

Ну, основной способ сделать это - сломать свою страницу на шесть <div> s:

<div class="left" id="l1">1</div>
<div class="right" id="r1">2</div>
<div class="left" id="l2">3</div>
<div class="right" id="r2">4</div>
<div class="left" id="l3">5</div>
<div class="right" id="r3">6</div>

Затем вы пишете CSS:

div.left {
    float: left;
    clear: both;
}

И вы должны получить что-то вроде:

Не требуется вложенный <div>.

Ответ 2

Обычно вы должны разделить содержимое на семантику, а затем стилизовать его.

Похоже, у вас есть пять основных областей:

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

Сделайте некоторую разметку:

<div class="left">
    <div id="messages">
        messages
    </div>
    <div id="user-list">
        user-list
    </div>
</div>
<div id="controls">
    controls
</div>
<div class="left">
    <div id="input">
        input
    </div>
    <div id="chatrooms">
        chatrooms
    </div>
</div>

И немного стиля:

.left{
    clear:both;
}
    .left div{
        float: left;
    }
#controls{
    clear: both;
}

И вы должны быть в состоянии завершить его здесь. Самая важная часть большинства макетов CSS - это правильное плавание.

Ответ 3

Новая опция сетки CSS:

<style>
#grid {
    display: grid;
    grid-template-columns: 20% 20% 20%;
}
</style>

<div id="grid">
    <div>first</div>
    <div>second</div>
    <div>thrid</div>
    <div>fourth</div>
    <div>fifth</div>
    <div>sixth</div>
    <div>seventh</div>
    <div>eighth</div>
    <div>nineth</div>
</div>

Ответ 4

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

Прежде чем объяснять этот вопрос, мне нужно знать, хотите ли вы поддерживать IE6 с этим. Если это так, вам, вероятно, придется вернуться к режиму IE quirks, так как вам понадобится модель box-box box (которая не может быть выбрана другим способом в IE, и невозможно использовать как top, так и bottom свойства). Если это так, я рекомендую поместить все другие браузеры в эту модель окна, так что вам не нужно создавать две отдельные таблицы стилей для IE и остальных (да, конечно, вам все равно понадобятся некоторые обходные пути). Короче говоря, после использования этой другой модели коробки вы можете иметь свойства quasi top и bottom, используя стиль, используя граничные и нижние границы. Они будут действовать как сверху и снизу, потому что теперь они находятся на заданной высоте (например, 100% окна просмотра). Надеюсь, это хотя бы немного понятно.

Если нет, то это немного проще, и вы можете использовать стиль с фиксированным позиционированием и <div> получать свойства top и bottom. IIRC, это также должно работать в IE7 +.

Но сначала скажите мне, нужна ли вам поддержка для багги или нет...

Ответ 5

Проблема с ответами Эли и Майка Д. заключается в том, что, если я правильно понял этот вопрос, puddingfox хочет, чтобы три div над eachother были распределены по общему размеру окна просмотра. В этом случае у вас возникнут проблемы с кодированием IE6, потому что тогда вы не можете использовать как верхний, так и нижний свойства одного и того же элемента (который необходим для средних div).