如何水平对齐跨距或分隔?

你可以用潜水器 float: left; 属性,它将使它们水平地显示在彼此旁边,但是您可能需要对以下元素使用清除,以确保它们不会重叠。

你可以使用

.floatybox {
     display: inline-block;
     width: 123px;
}

如果只需要支持支持内联块的浏览器。内联块可以有宽度,但和按钮元素一样是内联的。

哦,你也可以添加垂直对齐:在元素上加上顶部,以确保元素对齐。

我的回答是:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

为什么?

从技术上讲,跨度是一个内联元素,但是它可以有宽度,您只需要先将其显示属性设置为block。然而,在这个上下文中,DIV可能更合适,因为我猜您希望用内容填充这些DIV。

你肯定不想做的一件事是 clear:both 放在沙发上。这样设置意味着浏览器将不允许任何元素与它们位于同一行。结果,您的元素将堆积起来。

注意,使用 display:inline . 这将处理IE6利润加倍错误。如果需要,您可以用其他方法来解决这个问题,例如条件样式表。

我添加了一个包装器(随便什么),因为我猜这些不是页面上唯一的元素,所以您几乎肯定需要将它们与其他页面元素分离。

不管怎样,我希望这有帮助。

你可以做到:

<div style="float: left;"></div>

或

<div style="display: inline;"></div>

任何一个都会使分隔条水平平铺。

我会这样做,因为它给你3个均匀大小的列,均匀的间距和(甚至)比例。 注: 这并没有经过测试,因此可能需要对旧浏览器进行调整。

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

您可能希望查找基于CSS网格的布局。这个布局方法需要指定一些CSS类来将页面内容与网格结构对齐。与基于Web的布局相比,它与打印BSED布局更为密切相关,但它是许多网站上使用的一种技术,可以将内容布局到一个结构中,而无需借助表格。

试试这个 starters 从粉碎杂志。

我会用:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

这是我第一次从溢出中使用这个“代码工具”…但现在该做了…

看看css float属性。 http://w3schools.com/css/pr_class_float.asp

它与块元素(如DIV)一起工作。或者,如果您真的想显示一个包含一些信息的表,那么您想显示什么,表并不邪恶。

我会尽力把它们都给你 display: block; 属性和使用 float: left; .

然后你可以设置 width 和/或 height 随你的便。甚至可以指定一些垂直对齐规则。

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

另一个… 尝试使用 float: left; 或 right; 改变 width 对于其他值…它应该工作…还要注意的是,10%的数据不是由部门使用的。抱歉英语不好:)