Question

我是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只是为了让这个问题更容易理解。在真实页面中，它们将被分开！

Answer 1

以下是解决方案：

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

让我知道它是否适合您或您是否还有问题。

Answer 2

您可以设置最外部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>

Answer 3

试试这个：

<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属性是一种说法“确保此元素不会与之前的浮点数一起运行”。如果没有明确的元素，页面上的所有后续内容都会尝试与列一起流动。你可以说我们告诉浏览器，“花车就在这里结束了。”

查看此link以获取更多信息。

父DIV的默认定位被忽略

3 个答案: