开发者

HTML/CSS: Empty rectangle

I need to make an element that takes up a given amount of space (width) such that I can line up several of them together to make a horizontal bar. I can get it to w开发者_高级运维ork with absolute position, but I have to manually control 'left' to get the bar segments (rectangles) lined correctly, which is becoming somewhat troublesome. Is there an alternative?


You can do something like this where .rect divs are your boxes:

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

This would make a horizontal row of .rect boxes corresponding to the width/other css properties of your container.


You can simply float them.

Assuming a vertical stack you can float all inner elements right, give them a clear: left; and put them in an outer element that has a fixed width equal to the largest element.

Assuming a horizontal row, just floating them should be enough.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜