如何水平对齐跨度或div ?

My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?

我唯一的问题是让它们排成三行并且间隔相等。显然，span不能有宽度，并且div(以及带display:block的span)不会水平地显示在一起。建议吗?

<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.

< div风格= '宽度:30%;text-align:中心;浮:左;清楚:两者都有;>是我现在拥有的。

10 个解决方案

#1

You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.

你可以使用divs和浮动:左;属性，使它们在水平方向上彼此相邻，但是您可能需要对以下元素进行清除，以确保它们不重叠。

#2

You can use

您可以使用

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

If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.

如果您只需要支持支持内联块的浏览器。内联块可以有宽度，但是是内联的，比如按钮元素。

Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up

哦，你可能要添加垂直对齐:在元素的顶部确保对齐。

#3

My answer:

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

Why?

Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.

从技术上讲，Span是一个内联元素，但是它可以有宽度，您只需要设置它们的显示属性就可以先阻塞。但是，在这种情况下，div可能更合适，因为我猜您希望用内容填充div。

One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.

有一件事你绝对不想做，那就是弄清楚:这两件事都是关于女主角的。这样设置将意味着浏览器不允许任何元素与它们位于同一行。结果是，您的元素将堆积起来。

Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.

注意，显示的使用:内联。这涉及到ie6的翻码错误。如果有必要，您可以使用其他方法来解决这个问题，例如条件样式表。

I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.

我已经添加了一个包装器(#whatever)，因为我猜想这些不会是页面上唯一的元素，所以您几乎肯定需要将它们与其他页面元素隔离。

Anyway, I hope that's helpful.

不管怎样，我希望这是有帮助的。

#4

you can do:

你能做什么:

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

or

或

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

Either one will cause the divs to tile horizontally.

任何一个都将导致divs水平平铺。

#5

I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.

我会这样做，因为它会给你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>

#6

What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.

您可能想要做的是查找基于CSS网格的布局。这种布局方法涉及指定一些CSS类来将页面内容与网格结构对齐。它与打印bsed布局比基于web的布局更密切相关，但它是许多网站使用的一种技术，可以将内容布局到一个结构中，而不必使用表格。

Try this for starters from Smashing Magazine.

这是《Smashing》杂志的开场白。

#7

I would use:

我将使用:

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

It's the first time I use this 'code tool' from overflow... but shoul do it by now...

这是我第一次使用这个来自overflow的“代码工具”。但她现在就做……

#8

Look at the css Float property. http://w3schools.com/css/pr_class_float.asp

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

It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.

它与div之类的块元素一起工作。或者，如果你想要显示一个包含一些信息的表，那么表并不是坏事。

#9

I would try to give them all display: block; attribute and using float: left;.

我会尽量把它们都显示出来:块;属性和使用float: left;

You can then set width and/or height as you like. You can even specify some vertical-alignment rules.

你可以根据自己的喜好设置宽度和/或高度。您甚至可以指定一些垂直对齐规则。

#10

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

another... try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)

另一个……使用浮动:左;或者正确;改变其他值的宽度……它应该工作…还要注意的是，div使用的10%不是它们的……对不起，我的英语不好。