Есть ли элегантный способ выровнять 3 элемента влево, в центре и вправо на одной линии?CSS выравнивание по одной линии
Сейчас я пользуюсь 3 <div> всего: ширина: 33%; поплавок: левый; и он не работает слишком хорошо.
Поплавок первых двух левых и поплавок третий справа, при этом ширина будет соответствовать линии, на которую вы их размещаете.
Используйте ширину пикселей, если это позволяет ваш дизайн.
, что работает для меня:
<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>
вы имеете в виду то же самое?
Float LeftBlock 'left', CenterBlock 'none' и RightBlock 'right'. Но убедитесь, что элемент Center появился последним на вашей HTML-странице, иначе это не сработает.
Вы можете получить странные результаты, если в элементе, который вы добавляете, есть какой-либо запас. Здесь 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;
Как только вы заберете маржу от вышеуказанного кода, она будет работать должным образом.
Попробуйте это:
<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, единственный, который не плавает. Это будет устранено clearfix.
Вот еще один varition из темы: -
<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 для каждого из дивы «панели». Также дает центру оставшиеся 1% пикселей.
Я создал страницу со всеми тремя методами для сравнения на http://www.salestime.com/Ref/LeftCenterRight.html.
Это работает для меня. Я не знаю, является ли он самым элегантным, но он действительно выполняет эту работу: он хорошо реагирует на содержимое ячейки и изменяет размер.
<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">
</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>
Вы можете приложить полный образец кода? – bendewey
образец кода поможет. –