Question

我该如何修改：

<div style="border: solid 1px red; text-align: center">
    <div style="background-color: yellow; float: left">left</div>
    middle
    <div style="float:right; background-color: yellow">right</div>
</div>

所以“右”与“左”垂直排列？

这是我的坏css呈现的样子：

left                 middle
                                            right

谢谢！

Answer 1

如果您使用'float：right'，请将其作为第一件事：

<div style="border: solid 1px red; text-align: center">
    <div style="float:right; background-color: yellow">right</div>
    <div style="background-color: yellow; float: left">left</div>
    middle
</div>

否则它总是落入下一个文本行。

但为什么!!!!!

（1）因为一旦你开始在一行上放置静态文本，你就会有一个不确定的宽度来适应浮动元素。说你写道：

abc abc abc <div style="float: left">xyz xyz</div> abc abc abc

现在假设您开始调整窗口的大小，以便“abc abc abc”恰好适合第一行。现在你遇到一个浮点数，并尝试将它包含在你所在的线上。但它不合适：为了适应它，你必须在线上有“abc xyz xyz”，将剩余的“abc”回到下一行。但！现在你已经将浮动的插入点向下移动了一条线，因此浮动也必须下降一条直线。但！现在第一行没有正确包装，因为有三个“abc”的空间，但该行已经过早结束，以便为实际发生在页面下方的浮动让路......

CSS标准通过在等待下一行之前在带有内联文本的行上创建一个浮点来解决这个逻辑僵局。

（2）因为很多年前Netscape对<img float="right">所做的就是这样。

Answer 2

我得到了你需要的东西*：

<table style='border: 1px solid red; width: 100%; border-collapse: collapse;'>
  <tr>
    <td style='background-color: yellow; width: 25%;'>left</td>
    <td style='text-align: center;'>middle</td>
    <td style='background-color: yellow; width: 25%; text-align: right;'>right</td>
  </tr>
</table>

稍后谢谢你！

*免责声明：我只有95％认真。

Answer 3

这无需重新安排内容的顺序

<style type="text/css">
    .column
    {
    float: left;
    width:33.3%;
    }

    #container
    {
    text-align: center; 
    width:100%;
    }

    .clearfix 
    {
    display: inline-block; 
    }
</style>
<div id="container" class="clearfix">
      <div class="column">left</div>
      <div class="column">middle</div>
      <div class="column">right</div>
</div>

你也可以放弃33％并使它们代表你的设计，甚至在列上做一个固定的宽度。在那个原因中，使用ID而不是类。

Answer 4

将middle设为div，将其浮动到左侧并指定所有三个容器的宽度。此外，您迁移周围的div overflow: auto，否则它将自行崩溃。

Answer 5

你正在谈论这个A List Apart article

中的“圣杯”

Answer 6

3 column layout generator

Answer 7

“中间”需要处于自己的div中或者可以甩掉你的显示器

Answer 8

更新：

<div style="border: solid 1px red; text-align: center">
   <div style="background-color: yellow; float: left">left</div>
   <div style="float:right" background-color: yellow">right</div>
   <div style="float:none">middle</div>
</div>

Answer 9

尝试类似的东西：

<div style="border: solid 1px red; text-align: centerl width:100px">
          <div style="background-color: yellow; float: left; width:30px">left</div>
          <div style="background-color: yellow; float: left; width:30px">middle</div>
          <div style="background-color: yellow; float: left; width:30px">right</div>
</div>

Answer 10

要完成您要执行的操作，您应该将正确的列放在中间列之前。

<div style="border: solid 1px red; text-align: center">
      <div style="background-color: yellow; float: left">left</div>
      <div style="float:right; background-color: yellow">right</div>
      middle
</div>

因为右列相对于其上下文定位，该上下文是中间内容之下的一行。

CSS：三列布局问题

10 个答案: