无法使我的DIV并排对齐

Question

由于某些原因，我无法将我的div对齐在一起。"右侧"会在"左侧"下面。 我的代码有什么问题吗？ HTML:

<div id="activity-container">
    <div id="activity-left">left</div>
    <div id="activity-right">right</div>
</div>

CSS:

#activity-container
{
    width:90%;
    background-color:#FFFF00;
    Height:400px;
    margin-left: auto;
    margin-right: auto;
}

#activity-left {
    border: 1px solid black; 
    color:#000;
    margin: 0 auto; 
    width: 20%; 
    float: left;
    position: relative; 
}

#activity-right {
    border: 1px solid black; 
    margin: 0 auto; 
    color:#000;
    width: 80%; 
    float: left;
    position: relative; 
}

在线演示: Tinkerbin

- Greg

Answer 1

您的

标签边框会增加2像素的宽度。如果去掉边框，它们就会挨在一起 - jsFiddle 如果您确实需要边框，则可以使用outline来模拟它们 - jsFiddle

#activity-left {
    outline: 1px solid #000;
    color:#000;
    margin: 0 auto; 
    width: 20%; 
    float: left;
    position: relative; 
}

#activity-right {
    outline: 1px solid #000;
    margin: 0 auto; 
    color:#000;
    width: 80%; 
    float: left;
    position: relative; 
}​

- Zoltan Toth

---

但是边框消失了！！ - Mistu4u

Answer 2

如果您想保留边框，可以尝试更改宽度：

#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}

#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 19%;
float: left;
position: relative;
}

#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}

请检查Jsfiddle

- Mistu4u

Answer 3

您只需要从CSS中删除float和margin属性

#activity-right
{
    border: 1px solid black;           
    color: #000;
    width: 80%;           
    position: relative;
}

那样它将按照你的期望工作。

- lakhan pawar