Question

我想定位此HTML代码段

<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而不使用表来完成所有这些操作？怎么样？

Answer 1

扬科，

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

这是CSS：

#D1 {
  background-color: gold;
  padding: 10px;
  overflow: auto;
}
#D1\.1 , #D1\.2 , #D1\.3 {
   float: left;
   padding: 10px; 
}

如果您需要帮助了解溢出属性，请参阅讨论它的tutorial。

===

Answer 2

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

你可能想看看this layout，或者可能this layout，因为它们看起来大致与你所要求的一样。

祝你好运，并希望这有助于一些人。

Answer 3

#D1 {
  background-color: gold;
  padding: 10px;
  overflow: auto;
}
#D1\.1  {
   float: left;
   padding: 10px; 
}

#D1\.2 , #D1\.3 {
   float: right;
   padding: 10px; 
}

</style>

</head>
<body>


<div id="D1">
  <div id="D1.1">HeaderText</div>

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

</body>
</html>

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

3 个答案: