HTML / CSS：空矩形

Question

我需要制作一个占据给定空间（宽度）的元素，以便我可以将它们中的几个排成一行以形成一个水平条。我可以让它以绝对位置工作，但我必须手动控制“左”以使条形段（矩形）正确排列，这变得有点麻烦。还有其他选择吗？

Answer 1

你可以这样做.rect divs就是你的盒子：

<style>
#container{
  float:left;
  position:relative;
}
.rect{
  float:left;
  height: 50px; /* or whatever you want */
  position:relative;
  width: 50px; /* or whatever you want */
</style>

<div id="container">
 <div class="rect">&nbsp;</div>
 <div class="rect">&nbsp;</div>
 <div class="rect">&nbsp;</div>
 <div class="rect">&nbsp;</div>
</div>

这将使.rect框的水平行对应于容器的宽度/其他css属性。

Answer 2

你可以简单地漂浮它们。

假设一个垂直堆栈，你可以向右浮动所有内部元素，给它们一个clear: left;并将它们放在一个固定宽度等于最大元素的外部元素中。

假设一个水平行，只需浮动它们即可。