0

在这个 url1： http ://htmlandcssbook.com/code-samples/chapter-15/float.html 中，文本向左移到 float 元素。

但是在这个 url2 中：http://htmlandcssbook.com/code-samples/chapter-15/columns-two.html 如果 我取消类“column2of2”的浮动属性，则 div 不会留在 column1of2 之外。

我只是不知道为什么在第一个 url 中的文本停留在浮动 div 之外，但在第二个 url 中，类“column2of2”不能停留在浮动 div 之外。

4

2 回答 2

0

在第一个 url 中，引号在一个元素主体中向右浮动。这就是文本环绕它的原因。

在第二个 url 中，内容用两个 div相互分隔，这就是为什么引用文本不围绕内容的原因。

于 2013-01-11T10:16:32.563 回答
0

在您的每个示例中，内容的显示都是完全正确的。

在第一个例子中，“正确”的例子。文本显示在页面的主体中，另一个 div 位于主体内部，浮动在其右侧。内容无法显示在浮动 div 占据的区域，因为它的显示类型（默认情况下）display: block;见http://www.w3.org/wiki/CSS/Properties/display

在第二种情况下，虽然文本仍显示在页面正文中，但您会观察到页面正文中包含两个单独的 div。由于它们的默认显示属性，就像第一个一样，display: block;没有任何东西可以重叠。

请参阅这两个 jsfiddles，其中我强调了这些东西占据的区域：

.

“正确”显示：http: //jsfiddle.net/vxVfg/

“不正确”显示：http: //jsfiddle.net/duTEt/1/

.

这是第二个，它不是“正确”的工作：.

“不正确”显示 - 已修复： http: //jsfiddle.net/duTEt/3/ （如果您对下面的解释感到困惑，我在 jsfiddle 的 HTML 部分中编辑的内容留下了 3-4 行的空白，只需打开它并查看）

.

这是我改变的：

规则

.column2of2 
      {
        background: green;
        float: left;
        width: 300px;
        margin: 10px;
      }

成为：

.column2of2 
      {
        background: green;
        float: right; /* THIS WAS CHANGED */
        width: 300px;
        margin: 10px;
      }

为什么？好吧，我们希望它在右侧。

HTML 标记中的位置：

最后，我拿了这个：

            <div class="column2of2">
            <h3>Bicycle Timeline</h3>
            <ul>
                <li>1817: Draisienne</li>
                <li>1865: Velocipede</li>
                <li>1870: High-wheel bicycle</li>
                <li>1876: High-wheel safety</li>
                <li>1885: Hard-tired safety</li>
                <li>1888: Pneumatic safety</li>
            </ul>
        </div>

并将其放在包含的 div 中，应该是这样，所以它变成了：

<h1>The Evolution of the Bicycle</h1>
        <div class="column1of2">

 /* I PUT IT HERE */

      <div class="column2of2">
            <h3>Bicycle Timeline</h3>
            <ul>
                <li>1817: Draisienne</li>
                <li>1865: Velocipede</li>
                <li>1870: High-wheel bicycle</li>
                <li>1876: High-wheel safety</li>
                <li>1885: Hard-tired safety</li>
                <li>1888: Pneumatic safety</li>
            </ul>
        </div>

 /* IT ENDS HERE */

            <h3>The First Bicycle</h3>
            <p>In 1817 Baron von Drais invented
于 2013-01-11T16:04:15.263 回答