Альтернатива <таблице> расположение в 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>s, не помещая вложенную секунду <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
задан Matthias Braun 7 June 2019 в 17:09
поделиться

4 ответа

Ну, основной способ, которым вы это делаете, - это сломать свою страницу в шесть

:

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

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

1   2

3   4

5   6

нет вложенного

.

19
ответ дан 1 December 2019 в 21:12
поделиться

Проблема с ответами ELI и Mike D. - это то, что, если я правильно понял этот вопрос, PuddingFox хочет, чтобы три ДВВ выше были распространены в течение всего размера просмотра просмотра. В этом случае вы получите проблемы с кодированием IE6, потому что тогда вы не можете использовать как верхние, так и нижние свойства на одном элементе (который необходим для среднего Div).

1
ответ дан 1 December 2019 в 21:12
поделиться

Вы обычно должны размещать свой контент семантически и затем стиль его.

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

  • Сообщения
  • Список пользователей
  • Управления
  • Вход
  • Чатые комнаты

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

<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
ответ дан 1 December 2019 в 21:12
поделиться

Проверьте директиву переопределения . Вероятно, вам потребуется изменить make-файл один раз, но он должен делать то, что вы хотите.

Пример makefile:

override CFLAGS += -Wall

app: main.c
    gcc $(CFLAGS) -o app main.c 

Пример командных строк:

$ make
gcc -Wall -o app main.c 
$ make CFLAGS=-g
gcc -g -Wall -o app main.c 
-121--996787-

Я предполагаю, что самый быстрый из всех способов - жестко кодировать простые числа в коде.

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

Конечно, это работает, только если вы знаете верхнюю границу N во время компиляции, но, таким образом, имеет место (почти) все проблемы проекта Эйлера.

PS: Я мог бы ошибаться, хотя iff разбор источника с помощью жестких простых чисел медленнее, чем их вычисление в первую очередь, но насколько я знаю, Python работает из скомпилированных файлов .pyc , поэтому чтение двоичного массива со всеми простыми числами до N должно быть кроваво быстрым в этом случае.

-121--529510-

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

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

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

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

1
ответ дан 1 December 2019 в 21:12
поделиться
Другие вопросы по тегам:

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