Question

在这个url1中： http://htmlandcssbook.com/code-samples/chapter-15/float.html 文本留给浮动元素。

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

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

Answer 1

在第一个网址中，引号在一个元素正文中浮动到右边。这就是为什么文本包围它。

在第二个网址中，内容彼此分开并带有两个div ，这就是为什么引用文字不包含内容。

Answer 2

每个示例中的内容显示完全正确。

在第一个例子中，“正确”的一个。文本显示在页面正文中，另一个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

div和p标签浮动很奇怪而且不正确

2 个答案: