«правильный» способ сделать простое форматирование 2 столбцов в HTML - PullRequest
Новая
       10

«правильный» способ сделать простое форматирование 2 столбцов в HTML

2 голосов
/ 17 февраля 2009

Это вызов для css-гуру. Я хочу показать 2 ссылки на своей странице, на одной и той же «строке», одну слева, одну справа.

Приведенный ниже код прекрасно работает с точки зрения визуального представления, но я знаю, что таблицы для форматирования страницы - это еще не все. Может кто-нибудь сказать мне, какой должна быть «одобренная» разметка для этого? Я предполагаю, что это действительно просто, но я продолжаю перетряхивать оставшуюся часть своей страницы, когда пытаюсь, и продолжаю возвращаться к таблице, потому что для написания и выполнения работы требуются секунды, я просто хочу понять, как я должен делать это.

(у меня есть элемент, удерживающий заголовок страницы / навигацию над ним, а другой - форму, расположенную непосредственно под ним.) 

<table width=95%>
    <tr>
     <td>
      <a href="<? echo $url1 ?>">Back to List of Pages  </a>
     </td>
     <td align="right">
      <a href="<? echo $url2 ?>">View this page</a>
     </td>
    </tr>
</table>

изменить - ответ найден!

Хорошо, я проверил ответы Акрикоса и Магнара, и, похоже, Магнарс работает лучше всего в моей ситуации. Я обнаружил, что с помощью метода Акрикоса мне нужно поставить четкое: оба элемента внизу, чтобы предотвратить его слияние с дивом ниже. Кроме того, было легко обернуть Magnar в элемент

, чтобы ссылки соответствовали остальной части моей страницы, что обеспечивало необходимое пространство между ссылками и разделением ниже - мне нужно было поместить некоторую другую проставку туда с помощью метода Акрикоса. , Спасибо всем за вашу помощь в этом - я многому научился за последние 40 минут!

Ответы [ 6 ]

4 голосов
/ 17 февраля 2009

Вы можете избежать тяжелой разметки, используя тот факт, что обе ссылки являются однонаправленными. С этой разметкой: 

<div id="navigation"></div>    

<a id="view" href="...">View this page</a>
<a id="back" href="...">Back to List of Pages</a>

<form></form>

И этот простой CSS: 

#view {
    float: right;
}

Нет необходимости в очистке и не нужно указывать ширину.

Это решение будет работать только для этого сценария: две ссылки. Если вам нужно больше, посмотрите на набор плавающих элементов списка.

2 голосов
/ 17 февраля 2009

Вместо того, чтобы быть слишком счастливым, я бы предпочел поместить идентификаторы в теги привязки и напрямую применить к ним стили. Вам может понадобиться добавить тег «clear: both;» после ссылок, чтобы очистить поплавки ... Я оставлю это в качестве упражнения для читателя. 

<html>
<head>
<title>Test Page</title>
<style type="text/css">
#viewpage {
  float:right;
  margin-right:5%;
}
#listpages {
  float:left; 
}
</style>
</head>
<body>

  <a id='listpages' href="<? echo $url1 ?>">Back to List of Pages</a>
  <a id='viewpage' href="<? echo $url2 ?>">View this page</a>

</body>
</html>

Идея правильного использования CSS в этом случае заключается в том, чтобы html описывал ваш контент таким образом, который имеет смысл, а затем использует CSS для изменения способа отображения контента.

1 голос
/ 17 февраля 2009 
<div style="width: 95%">
  <div style="float: left;">Link 1</div>
  <div style="float: right;">Link 2</div>
</div>
0 голосов
/ 17 февраля 2009

Таким образом, вы можете настроить ширину столбца, я делал это уже довольно давно. Я понял это, изучив википедию HTML и CSS. Столбец B будет занимать оставшуюся ширину, но останется в пределах ширины # external-wrapper. 

<div id="outer-wrapper">
<div style="float: left; width: 200px;">
    Column A
</div>
<div style="margin-left: 210px;">
    Column B
</div>
<div style="clear: both;"></div>
</div>

Вы можете вкладывать их, они имеют понятный поддерживаемый макет на основе столбцов.

0 голосов
/ 17 февраля 2009

Я думаю, что лучший способ сделать любой макет в настоящее время - это использовать сетки. Как только вы научитесь использовать сетку, вы никогда не будете оглядываться.

Хороший способ начать работу - использовать Blueprint CSS. Это хорошая структура, которая поможет вам разработать макет на основе сетки.

0 голосов
/ 17 февраля 2009

Вы имеете в виду это? 

 <html>
  <head>
    <style>
      div.fl {
        float: left;
      }
      div.fr {
        float: right;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div class="fl">
      A
    </div>
    <div class="fr">
      B
    </div>
  </body>
</html>

заменить А и В

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...