CSS：三列布局问题 [英] CSS: Three Column Layout problem

问题描述

如何修改：

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

因此，right与left垂直排列？

这是我的坏css看起来像渲染：

 左中间
右
  

谢谢！

解决方案>

如果你使用一个'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标准解决了这个逻辑僵局，在等待下一行之前，在一行有内联文本的行上浮动。

）因为这是Netscape用许多年前的< img float =right> 所做的。

How can I modify this:

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

So that "right" is in line vertically with "left"?

Here's what my bad css looks like rendered:

left                 middle
                                            right

thanks!

解决方案

If you use a ‘float: right’, make it the first thing on the line:

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

Otherwise it always falls into the next text line.

but why!!!!!

(1) Because once you've started putting static text on a line, you've got an indeterminate width to fit a floated element into. Say you wrote:

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

Now imagine you start resizing that window down so that "abc abc abc" just fits on the first line. Now you meet a float, and try to include it on the line you're on. But it doesn't fit: to fit it on, you'd have to have "abc xyz xyz" on the line, reflowing the remaining "abc" to the next line. But! Now you've moved the float's insertion point down a line, so the float has to drop down a line too. But! Now the first line isn't wrapped properly, because there's room for three "abc"s, but the line has been ended prematurely to make way for a float that actually occurs further down the page...

The CSS standard solves this logical impasse by making a float on a line with inline text before it wait for the next line.

(2) Because that's what Netscape did with <img float="right"> many, many years ago.

这篇关于CSS：三列布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！