父DIV的默认位置将被忽略

问题描述

| 我是CSS布局的新手。我需要显示以下内容：

+-------------------------------------+
|                            Content_A|
| Content_B Content_C ...             |
+-------------------------------------+

我想要一个非常简单的标记和CSS，因此我做到了：

<div>
  <div id=\"d1\">
    <div style=\"float: right;\">Content_A</div>
  </div>
  <div id=\"d2\">
    <div style=\"float: left;\">Content_B</div>
    <div style=\"float: left;\">Content_C</div>
    <div>...</div>
  </div>
</div>

但是结果是这样的：

+-------------------------------------+
| Content_B Content_C ...    Content_A|
+-------------------------------------+

看起来DIV d1和d2的默认位置被忽略了。为什么以及解决方案是什么？ 如果您有其他标记/ CSS建议用于所要求的布局（例如使用SPAN），将非常欢迎。 顺便说一句，我混合使用HTML和CSS只是为了使这个问题更容易理解。在实际页面中，它们将被分隔！     

解决方法

        解决方法如下：

<div>
  <div id=\"d1\">
    <div style=\"text-align: right;\">Content_A</div>
  </div>
  <div id=\"d2\">
    <div style=\"float: left;\">Content_B</div>
    <div style=\"float: left;\">Content_C</div>
    <div>...</div>
  </div>
</div>

让我知道它是否适合您或您仍然有问题。     ,        您可以为最外面的div设置显示格式，以使内容垂直对齐：

<div style=\"display: table;\">
  <div id=\"d1\">
    <div style=\"float: right;\">Content_A</div>
  </div>
  <div id=\"d2\">
    <div style=\"float: left;\">Content_B</div>
    <div style=\"float: left;\">Content_C</div>
    <div>...</div>
  </div>
</div>

    ,        尝试这个：

<div>
  <div id=\"d1\">
    <div style=\"float: right;\">Content_A</div>
    <div style=\"clear:both;\"></div>
  </div>
  <div id=\"d2\">
    <div style=\"float: left;\">Content_B</div>
    <div style=\"float: left;\">Content_C</div>
    <div>...</div>
    <div style=\"clear:both;\"></div>
  </div>
</div>

clear属性是说“确保此元素不与先前的float一起运行”的一种方式。如果没有清晰的元素，则页面上的所有后续内容都将尝试沿着列流动。您可以说我们是在告诉浏览器，“浮点数到此为止”。 检查此链接以获取更多信息。