css – 无法将我的DIV彼此对齐

2019年8月3日 148次阅读

出于某种原因,我不能将我的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

最佳答案 你在div-s上的边框加宽了2px的宽度.删除它们,它们将彼此相邻 –
jsFiddle

如果你真的需要边框,那么用大纲模仿它们 – 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; 
}​
点赞