Question

我怎样才能安排div，使box1出现在左边，box2出现在中心，box3出现在右边，没有重叠？

    <!DOCTYPE html>
    <html>
    <head>
    <title>example</title>
    </head>
    <body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    </body>
    </html>

Answer 1

尝试这个简单的解决方案 - DEMO

<强> HTML

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>

<强> CSS

.box{background-color:#eee;width:100px;height:100px;float:left;}

Answer 2

<style>
.alignDiv div{
    float:left; width:200px; height:200px; padding:10px; margin:10px;
}
.left{
    border:2px solid #f00;
}
.center{
    border:2px solid #000;
}
.right{
    border:2px solid #bff;
}
</style>

<div class="alignDiv">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Answer 3

使用课程时，应重复姓名，ID应该是唯一的。真的很容易做这样的事情;

HTML

<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>

CSS

.box
{
    float:left;
    width:50px;
    height:50px;
    margin:10px;
    background-color:black;
    color:white;
}

此外，当想到div中的ID和类时，这是一件值得记住的事情;

ID应该是唯一的，并用于页面的整体结构。
当您想要重新创建类似的内容时，应使用类，例如对齐的内容框。

希望这有帮助

如何并排排列div而不重叠？

3 个答案: