HTML/CSS：空矩形

Question

我需要创建一个占用给定空间量（宽度）的元素，以便我可以将它们中的几个排成一行来制作一个水平条。我可以让它与绝对位置一起工作，但我必须手动控制'left'才能正确排列条形图段（矩形），这样会变得有些麻烦。有其他选择吗？

Answer 1

你可以做这样的事情哪里.rect div的是你的箱子：

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

这将使得对应的容器的宽度/其它CSS属性.rect盒的水平行。

Answer 2

您可以简单地浮动它们。

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

假设一个水平行，只是浮动它们应该是足够的。