Нужны советы по выравниванию HTML - PullRequest
Новая
       10

Нужны советы по выравниванию HTML

1 голос
/ 08 февраля 2011

Я пишу расширение для Chrome, и меня особенно беспокоит макет HTML на одной из моих страниц.Пока что у меня есть кое-что очень простое.У меня есть таблица, которая динамически изменяется в JavaScript, и она должна оставаться слева.У меня также есть DIV, который будет контейнером для целого набора других элементов управления, таких как поля редактирования и кнопки.Я хочу, чтобы этот основной DIV отображался справа от таблицы.

Все, что я до сих пор пробовал, не смогло получить этот DIV справа от моей таблицы.В настоящее время мой DIV находится ниже таблицы.Я слышал, что использование float работает, но это кажется хакерским и имеет забавные побочные эффекты.Может быть, я пока не очень разбираюсь в макетах HTML, хотя я читал о них.Хотелось бы, чтобы это работало больше как Winforms, где я мог бы просто сказать что-нибудь, куда идти.В любом случае, если бы кто-то мог помочь мне научить меня тому, как найти лучший и самый чистый метод достижения желаемого макета, я был бы признателен за это.Мой код ниже: 

<body>
    <div id="logged_in">
        <table id="contact_table">
            <tr>
                <th>Contact Name</th>
                <th>Phone Number</th>
            </tr>
        </table>
        <div id="interface">
            <p>Here are instructions.</p>
        </div>
    </div>
</body>

Обратите внимание, что в приведенном выше коде DIV с идентификатором 'interface' должен находиться справа от таблицы с идентификатором contact_table '.

Ответы [ 4 ]

0 голосов
/ 08 февраля 2011

Использование float - это именно то, что вы должны сделать здесь. 

<table id="contact_table" style="float:left">

Возможно, вам также понадобится это: 

<div style="clear:left"></div>

прямо перед вашим тегом </body>.

0 голосов
/ 08 февраля 2011

Ваши div'ы должны быть установлены на float: left;

Это совсем не хакерство, это просто способ отображения элементов div рядом друг с другом (display: inline также может работать) - однако вам всегда нужно обязательно очищать свои блоки (предполагая, что class = 'fl 'означает float: left и class =' ​​ff 'означает clear: both;): 

<div class='fl><!--table--></div><div class='fl'><!--other content--></div>
<div class='ff'><!--clear the float block--></div>

Это должно помочь вам начать - удачи!

0 голосов
/ 08 февраля 2011 
<body>
<div id="logged_in">
    <table id="contact_table", style="float:left;">
        <tr>
            <th>Contact Name</th>
            <th>Phone Number</th>
        </tr>
    </table>
    <div id="interface">
        <p>Here are instructions.</p>
    </div>
</div>

Поместит инструкции справа от таблицы контактов.

Я бы посмотрел на систему макетов, такую ​​как Blueprint: http://blueprintcss.org/ Это действительно хорошо для управления выравниванием объектов, и вам не всегда нужно полагаться на таблицы.

0 голосов
/ 08 февраля 2011

Я не уверен в полном объеме макета, но у вас есть много, много вариантов. вот два:

  1. (несовместимо) замените div "logged_in" на таблицу с именем пользователя / паролем в виде вложенной таблицы внутри левой TD, как она у вас есть, а ваш интерфейс управляет отдельным TD справа. 1005 *

  2. Добавьте float: left к таблице и float: left к интерфейсу div и управляйте его позиционированием с помощью margin-left

...