Question

是否有一种优雅的方法可以在同一条线上左右，中间和右边对齐3个元素？

现在我正在使用3 <div>全部宽度：33％;浮动：左;并且效果不佳。

Answer 1

对我有用：

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

你的意思是一样的吗？

Answer 2

如果要添加的元素中有任何边距，则可能会得到奇怪的结果。这是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;

一旦从上面的代码中删除了边距，它就应该按预期工作。

Answer 3

试试这个：

<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多，唯一一个没有浮动。一个clearfix将解决这个问题。

Answer 4

我在http://www.salestime.com/Ref/LeftCenterRight.html创建了一个包含所有三种方法的页面。

Answer 5

将前两个浮动并向右浮动第三个，同时确保宽度适合放置它们的线。

如果您的设计允许，请使用像素宽度。

Answer 6

Float LeftBlock'left'，CenterBlock'none'和RightBlock'right'。但确保中心元素显示在HTML网页的最后，否则无效。

Answer 7

这是主题的另一个变体： -

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

请注意，可以通过为每个“panel”div使用内部div来实现边框。同样给中心保留1％的像素。

Answer 8

这对我有用。我不知道它是否是最优雅的，但确实可以完成这项工作：它对“细胞”内容的反应很好并且可以调整大小。

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

CSS同线对齐

8 个答案: