如何水平对齐跨度或div？

88

我唯一的问题是使它们排成三排并具有相等的间距。显然，跨距不能具有宽度，并且div（以及带有display：block的跨距）不能水平并排出现。有什么建议吗？

<div style='width:30%; text-align:center; float:left; clear:both;'> 是我现在所拥有的。

css html

— 托马斯·欧文斯
source

2

您为什么不想使用桌子？

— DOK

63

因为数据不是表格形式的。

— Thomas Owens

10

下面的答案是合适的，但是请考虑使用表，如果最终使事情变得更复杂，则可以减轻您的麻烦。如果可以简化工作，可以使用表格。务实！:-)

— 拉胡尔（Rahul）

5

认真地，不要使用桌子。使用CSS可以很容易地做到这一点。

— 山姆·默里·萨顿

26

“如果可以简化工作，可以使用表格。” 是绝对糟糕的建议。请忽略！：）

— 鲍比·杰克

78

您可以将divs与该float: left;属性一起使用，该属性将使它们彼此水平并排显示，但是随后您可能需要对以下元素使用清除功能，以确保它们不会重叠。

— jmcd
source

17

实际上，您可以设置overflow: hidden。请参阅：stackoverflow.com/questions/323599/...

— 大卫Wolever

1

我发现这可能会破坏后续div中的布局。例如，如果我使用您的解决方案，然后尝试padding-left在右侧的div中，它将被忽略。

— 塞巴斯蒂安·马赫

2

没有理由思考：<div style="display: in-line"></div><div style="display: in-line"></div>应该工作正常。

— zoltar

使用float会带来很多新问题。overflow: hidden是最好的解决方案。

— saran3h 18/12/23

39

您可以使用

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

如果仅需要支持支持嵌入式块的浏览器。内联块可以具有宽度，但可以内联，就像按钮元素一样。

哦，您可能会想要添加vertical-align：在元素顶部以确保所有内容对齐

— 鲁内
source

1

垂直对齐不适用于块级元素。在这种情况下，我们谈论的是其显示设置为行内块的元素。

— runeh

1

inline-block的现在支持在每个A级浏览器只是IE6 / 7，但有一个黑客获得inline-block的工作在IE6 / 7。

— 亚历山大·伯德

12

我的答案：

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

为什么？

从技术上讲，跨度是一个内联元素，但是它可以具有宽度，您只需要将其显示属性设置为首先阻塞即可。但是，在这种情况下，div可能更合适，因为我猜您想用内容填充这些div。

您绝对不希望做的一件事是clear:both在div上进行设置。像这样设置意味着浏览器将不允许任何元素与它们位于同一行。结果，您的元素将堆积起来。

注意，使用display:inline。这处理了ie6保证金加倍错误。您可以根据需要以其他方式解决此问题，例如条件样式表。

我添加了一个包装器（#whatever），因为我猜这些将不是页面上唯一的元素，因此您几乎肯定需要将它们与其他页面元素分开。

无论如何，我希望这会有所帮助。

— 山姆·默里·萨顿
source

当我将其剪切并粘贴到jsfiddle中时，这似乎不起作用

— Jamie Fristrom 2012年

1

对不起，那里有错字；我应该在每行之后加上一个分号，然后它才起作用。我已经进行了相应的编辑。尽管再次回顾了这个问题，但我建议OP需要在他的示例中添加更多代码。如这里的答案所示，这里可以使用多种方法，具体使用哪种方法取决于上下文。

— 山姆·默里·萨顿

4

你可以做：

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

要么

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

任一种都会导致div水平平铺。

— 杰里米·B。
source

3

我会做这样的事情，因为它为您提供了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>

— 猴子做
source

2

我会用：

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

这是我第一次从溢出中使用此“代码工具” ...但现在应该这样做...

— talevineto
source

1

您可能想做的就是查找基于CSS网格的布局。此布局方法涉及指定一些CSS类，以使页面内容与网格结构对齐。与基于Web的版式相比，它与基于Web的版式更紧密相关，但是它是许多网站上使用的一种技术，用于将内容布局为结构，而不必借助表格。

试试这个对于初学者从碎杂志。

— marcus.greasly
source

0

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

它适用于div等块元素。另外，如果您要显示的是信息表，那么表并不是邪恶的。

— 缺口
source

但这不是桌子。它们只是我想彼此相邻出现的三件事。

— Thomas Owens

找不到404页

— Ali Yousefi '18

0

我会尝试赋予它们所有display: block;属性并使用float: left;。

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

— d1rk
source

0

    <!-- 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;or right;，将widthfor更改为其他值...这应该有效...还请注意div所使用的arent的10％在它们之间...对不起，英语不好:)

— talevineto
source