8

有没有一种优雅的方法可以将 3 个元素左、中、右对齐在同一行上？

现在我正在使用 3<div>的宽度：33%;float:left; 而且效果不太好。

4

8 回答 8

7

这对我行得通：

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

你的意思是一样的吗？

于 2009-02-08T16:17:49.697 回答
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;

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

于 2009-02-08T16:23:04.350 回答
2

尝试这个：

<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 会解决这个问题。

于 2009-02-08T16:38:26.270 回答
1

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

于 2009-03-13T00:36:50.810 回答
0

这对我有用。我不知道它是否是最优雅的，但它确实有效：它对“单元格”内容和调整大小反应良好。

<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>
于 2011-12-28T02:33:17.480 回答
0

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

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

于 2009-02-08T16:17:06.857 回答
0

浮动 LeftBlock 'left'、CenterBlock 'none' 和 RightBlock 'right'。但请确保 Center 元素最后出现在您的 HTML 页面上，否则它将不起作用。

于 2009-02-08T16:19:49.083 回答
0

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

<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% 的像素。

于 2009-02-08T16:41:28.523 回答