html - 如何对齐多个div彼此相邻？

Question

我是 Html 新手，我正在尝试将多个 div 水平对齐。我也尝试了浮动属性和显示内联属性，但没有任何东西可以正常工作。任何人都可以建议任何方法吗？

我的代码：

#display2letter
{
width:150px;
height:50px;
background-color:grey;
box: 10px 10px 5px #888888;    
}
#display3letter
{
width:150px;
height:50px;
background-color:blue;
box: 10px 10px 5px #888888;
}
#display4letter
{
width:150px;
height:50px;
background-color:grey;
box: 10px 10px 5px #888888;
}

#one
{
position:fixed;
left:23%;
}
#two
{
position:fixed;
left:23%;
}
#three
{
position:fixed;
left:23%;
}

这是小提琴

http://jsfiddle.net/pGHS9/1/

Answer 1

我制作了 JSFIDDLE，我不确定这是否是您所说的。

我添加了一个框并将位置更改为相对：

.box {
    float: left;
    width: 270px;
}
#one
{
position:relative;
left:23%;
}
#two
{
position:relative;
left:23%;
}
#three
{
position:relative;
left:23%;
}

JSFIDDLE

Answer 2

更推荐的解决方案是放置带有 display: inline-block 和百分比块的容器。

像这样的东西：

html

<div class="horizontal">
other elements
</div><div class="horizontal">
other elements
</div>

css

.horizontal {
  display:inline-block;
  width: 33%;
}

该解决方案是响应式设计实现。

Answer 3

尝试：

<div id="first">first</div>
<div id="second">second</div>

然后

#first{
    float:left;
    width:200px;
    border:1px solid green;
}
#second{
    float:left;
    width:200px;
    border:1px solid red;
}

这是 JSFiddle

http://jsfiddle.net/PdXk5/

Answer 4

Try this....

<div>
   <div class="inner">first div</div>
    <div class="inner">second div</div>
    <div class="inner">third div</div>
</div>
div{
    border:1px dashed #000;
    position:relative;
    float:left;
}
div.inner{
    border:1px solid black;
    width:100px;
    height:100px;
    margin:5px;
}