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

更推荐的解决方案是将容器放置显示：内联块和块百分比。

像这样：

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

如何将多个div对齐？

4 个答案: