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

Итак, сейчас у меня есть настройка веб-страницы, которая точно соответствует размеру окна браузера с парой 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 университета.

13 голосов | спросил Puddingfox 25 Jam1000000amMon, 25 Jan 2010 06:32:08 +030010 2010, 06:32:08

4 ответа


0

Как правило, следует семантически разметить контент, а затем стилизовать его.

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

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

Давайте сделаем некоторую разметку:

<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 - правильное плавание.

ответил Eli 25 Jam1000000amMon, 25 Jan 2010 07:01:51 +030010 2010, 07:01:51
0

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

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

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

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

ответил Marcel Korpel 25 Jam1000000amMon, 25 Jan 2010 07:06:54 +030010 2010, 07:06:54
0

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

ответил Marcel Korpel 25 Jam1000000amMon, 25 Jan 2010 07:11:33 +030010 2010, 07:11:33
0

Новая опция 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>
ответил dhiman 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 25 Sep 2017 23:36:16 +0300 2017, 23:36:16

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132