CSS：三列布局问题

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

将div middle ，将其浮动到左侧，然后为所有三个容器指定宽度。 同样，您使周围的div overflow: auto ，否则它将自身崩溃。

Answer 5

您正在谈论“圣杯”，就像这篇“ A List Apart”文章中一样

Answer 6

3列布局生成器

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>

因为右列相对于其上下文位于中间内容下方的一行。