Справка по макету CSS - нижний колонтитул из 3 столбцов

Question

Я пытаюсь сделать так, чтобы нижний колонтитул на моем сайте выглядел так:

Wilgrove Baptist Church             Home | About | Ministries            1234 S. Main st.
John G. Smith, Sr. Pastor              Contact Us | Site Map           somwhere, ID 55555

Моя проблема состоит в том, чтобы выложить его в 3 столбца. Есть предложения?

Спасибо!

Answer 1

Довольно легко сделать с помощью поплавков:

<div id="footer">
    <p class="left">Left aligned text here<br />Next line here</p>
    <p class="right">Right aligned text here<br />Next line here</p>
    <p class="centered">Center Text here<br />Next line here</p>
</div>

и CSS:

.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}

Answer 2

Генератор с 3 колонками

Answer 3

<div id="footer">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</div>

#footer { display: table; width: 100%; table-layout: fixed; }
#footer > div { display: table-cell; }

Это не будет работать в IE 7 и более ранних версиях. В этом случае я рекомендую разметить их (через условные комментарии IE) аналогично alex, где вы используете простые числа с плавающей точкой. Они не будут правильно центрироваться, но они, безусловно, будут работать, и, когда люди переходят на IE8 или лучший браузер, они автоматически преобразуются в решение display: table.

Answer 4

Вот список трехколоночных макетов CSS . Alistapart.com также имеет статью .

Я бы порекомендовал просмотреть список «Трехколоночные макеты CSS»; каждая ссылка подробно описывает, как она выглядит с точки зрения «макета газеты», а также преимущества и недостатки каждой из них. Я использовал его для размещения трех столбцов для сайта , который я поддерживаю .

Answer 5

Чтобы иметь три столбца почти равной ширины:

HTML:

<div id="footer">
    <p>First section, first line of text<br /> Second line of text</p>
    <p>Second section, first line of text<br /> Second line of text</p>
    <p>Third section, first line of text<br /> Second line of text</p>
</div>

CSS:

#footer > p:first-child {
    float: left;
    text-align: left;
    width: 33.3%; }

#footer > p:nth-child(2) {
    float: left;
    text-align: center;
    width: 33.4%; }

#footer > p:last-child {
    float: right;
    text-align: right;
    width: 33.3%; }

По сравнению с ответом Jayx, я упростил разметку и использовал различные селекторы в таблице стилей.

Подробнее о дробных процентных длинах .

Answer 6

Я использовал следующий код на моем собственном сайте.

HTML:

<footer>
    <aside class="footer-left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </aside>

    <aside class="footer-right">
        Aenean elit ante, ultrices ac vestibulum id, tempor id nisi.
    </aside>

    <aside class="footer-center">
        Integer tincidunt, sem at placerat ullamcorper, urna felis condimentum justo.
    </aside>
</footer>

CSS:

footer [class ^= 'footer-'] {
    width: 33.3333%;
    display: inline-block;
    text-align: center;
}

footer .footer-left {
    float: left;
}

footer .footer-right {
    float: right;
}

Весь контент будет выровнен по центру, потому что это то, что я хотел. Вы можете легко изменить это, хотя.

Answer 7

На самом деле код выравнивания текста работает иначе, чем то, что у вас есть текст, наклоненный к концу. Чтобы это исправить, просто примените отрицательное значение на верхнем поле для выравнивания с левым текстом. Посмотрите ...

#left {
    text-align:left;
}

#right {
    text-align:right;
    margin-top:-35px;
}

#center {
    text-align:center;
    margin-top:-35px;
}

Answer 8

Попробуйте это:

<div style="float:left; padding:10px;">left</div>
<div style="float:left; padding:10px;">center</div>
<div style="float:left; padding:10px;">right</div>

Вы можете настроить отступы и т. Д. Соответственно.