如何仅使用 CSS 而不使用表格来定位它答案

【问题标题】：How to position this using only CSS and no tables如何仅使用 CSS 而不使用表格来定位它
【发布时间】：2010-08-06 07:13:57
【问题描述】：

我想定位这个 HTML sn-p

<div id="D1">
  <div id="D1.1">HeaderText</div>
  <div id="D1.2"> From
    <input id="from" name="from" value=""/>
  </div>
  <div id="D1.3"> To
    <input id="To" name="To" value=""/>
  </div>
</div>

这边

+-(D1)-------------------------------------------------------------------------+
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+|
||                                  ||    +-(from)-------+||  +-(to)---------+||
|| HeaderText                       ||From|              |||To|              |||
||                                  ||    +--------------+||  +--------------+||
|+----------------------------------++--------------------++------------------+|
+------------------------------------------------------------------------------+

使用 CSS

我需要的东西：

D1.1 必须左对齐，D1.2 和 D1.3 必须只占用它们需要的空间并且必须右对齐。
尽管我在这里表示了 D1.1 的宽度以占用所有剩余的水平空间，但这并不是必须的。
D1 应垂直生长以完全包含 D1.1、D1.2、D1.3。（没有溢出，所有 div 完全可见）
设计必须流畅（即，如果我更改 div 内文本的字体大小，布局也会相应调整。

是否有可能只使用 CSS 而不使用表格来完成所有这些工作？怎么样？

【问题讨论】：

当然有可能。你尝试了什么？
你应该用<label>标签包裹你的“From”和“To”：<label for="from">From</label>

标签： html css layout

【解决方案1】：

扬科，

您的 ID 名称中有句点，这在 CSS 中会出现问题，因为句点是保留的。最好的办法是不要在名称中使用保留字符，但如果你必须拥有它们，那么你必须用反斜杠转义句点。标记可以保持原样。

这是 CSS：

#D1 { 背景色：金色；填充：10px；溢出：自动； } #D1\.1 , #D1\.2 , #D1\.3 { 向左飘浮; 填充：10px； }

如果您在理解溢出属性方面需要帮助，这里有一个讨论它的tutorial。

===

【讨论】：

它是伪 html。句点是为了明确图中div的层次关系。
我测试了它然后它击中了我！！！我很抱歉。我的意思是 D1.2 和 D1.3 RIGHT 对齐。现在将修复它！我的坏
我做了一件显而易见的事情，将 D1.1 的样式与其他兄弟姐妹分开，并正确浮动 D1.2 和 D1.3。但他们换了地方。在不知道宽度的情况下如何解决这个问题？
在这种情况下，将 d1.2 和 d1.3 向右浮动，但由于顺序很重要，请按如下所示修改您的标记。
我一直在寻找答案而不改变标记（你知道，语义网和所有爵士乐），但我必须这样做。谢谢。

【解决方案2】：

Layout Gala 是基于 CSS 的布局的一个很好的参考。

您可能想看看this layout，或者可能是this layout，因为它们看起来都大致符合您的要求。

祝你好运，希望这对一些人有所帮助。

【讨论】：

哇，不错。让我详细看看。

【解决方案3】：

#D1 { 背景色：金色；填充：10px；溢出：自动； } #D1\.1 { 向左飘浮; 填充：10px； } #D1\.2 , #D1\.3 { 浮动：对；填充：10px； }

HeaderText

到

来自

正文>