CSS выравнивание по одной линии - PullRequest
Новая
       11

CSS выравнивание по одной линии

8 голосов
/ 08 февраля 2009

Существует ли элегантный способ выравнивания 3 элементов слева, по центру и справа на одной линии?

Сейчас я использую все 3 <div> с шириной: 33%; float: left; и это не работает слишком хорошо.

Ответы [ 8 ]

7 голосов
/ 08 февраля 2009

, что работает для меня: 

<html>
  <head>
    <style>
      div.fl {
        float: left;
        width: 33%;
      }
      div.fr {
        float: right;
        width: 33%;
      }
    </style>
  </head>
  <body>
    <div class="fl">
      A
    </div>
    <div class="fl">
      B
    </div>
    <div class="fr">
      C
    </div>
  </body>
</html>

Вы имеете в виду то же самое?

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

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

<div style="float: left; width: 100px;">
    left
</div>
<div style="float: right; width: 100px;">
    right
</div>
<div style="width: 100px; margin: 0 auto;">
    center
</div>

Вы должны принять во внимание, что левый и правый div не сдвигают контейнер контейнера (div вокруг кода выше) на высоту, даже если они имеют больше содержимого, чем центральный div, единственный не перемещенный. Об этом позаботится очиститель.

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

Вы можете получить странные результаты, если в элементе, к которому вы его добавляете, есть поле. Именно здесь width: 33% может не сработать, поскольку вам нужно будет учитывать размер поля, который имеет этот элемент. 

<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>

<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>

</body>
</html>

Это приведет к тому, что он не будет работать должным образом из-за поля, добавляемого к каждому элементу div. Точно так же, если вы добавите слишком много границ к каждому элементу div, вы получите аналогичный результат border: 5px solid !important;

Как только вы уберете поле из вышеприведенного кода, оно должно работать как положено.

1 голос
/ 13 марта 2009

Я создал страницу со всеми тремя методами для сравнения на http://www.salestime.com/Ref/LeftCenterRight.html.

0 голосов
/ 28 декабря 2011

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

<html>
    <head>
        <style>
            .a {
                border: 1px dotted grey;
                padding: 2px;
                margin: 2px;
            }
            .l {
                border: 1px solid red;
                background-color: #fee;
                float:left;
            }
            .c {
                border: 1px solid green;
                background-color: #efe;
                text-align:center;
            }
            .r {
                border: 1px solid blue;
                background-color: #eef;
                float:right;
            }
        </style>
    </head>
    <body>
        <div class="a">
            <div class="l">
                &nbsp;
            </div>
            <div class="r">
                toto v.2 adfsdfasdfa sdfa dfas asdf 
            </div>
            <div class="c">
                item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
            </div>
        </div>
    </body>
</html>
0 голосов
/ 08 февраля 2009

Вот еще одна вариация темы: - 

<html>
<head>
<style type="text/css">
    div div {border:1px solid black}
    div.Center {width:34%; float:left; text-align:center}
    div.Left {float:left; width:33%; text-align:left}
    div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>

Обратите внимание, что граница возможна при использовании внутреннего div для каждого из div'ов «панели». Также дает центру оставшийся 1% пикселей.

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

Float LeftBlock «влево», CenterBlock «нет» и RightBlock «вправо». Но убедитесь, что элемент Center отображается последним на вашей HTML-странице , иначе он не будет работать.

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

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

Используйте ширину в пикселях, если ваш дизайн позволяет это.

...