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

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

Все, что я пробовал до сих пор, не удалось получить, что 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 с «интерфейсом» ид должен быть справа от таблицы с идентификатором «contact_table».

источник

2011-02-08 void.pointer

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

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

Вы, вероятно, также нужно это:

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

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

источник

2011-02-08 05:30:02 awm

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

(не соответствует) заменить «logged_in» DIV с таблицей с именем пользователя/пароль в качестве вложенной таблицы внутри левой TD, как вы в настоящее время есть, и элементы управления интерфейса в отдельном документе TD справа.
Добавить поплавок: слева таблицу и поплавок: слева интерфейс DIV и контролировать это позиционирование с маржинальным левым

источник

2011-02-08 05:26:34 jerebear

Ваших дивами оба должны быть установлены, чтобы плавать: слева;

Это не хаки, это то, как вы получаете divs для отображения рядом друг с другом (дисплей: inline может работать также) - однако вы всегда должны быть уверены, что очистите свои блоки (при условии, что class = Fl»означает Float: левый и класс = 'и далее' означает ясно: как;):

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

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

источник

2011-02-08 05:29:16 JustinByrne

Спасибо за ваш совет. Я попробовал float: left (без ясного), и я упомянул, что он взломан, потому что, когда я модифицировал левый край DIV, он не отступал.Я узнал, что это связано с тем, что ваш запас должен быть больше ширины таблицы, что, по моему мнению, было нарушено. –

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

Поставил бы указания о праве на contact_table.

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

источник

2011-02-08 05:29:38

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

ответ

Смежные вопросы