我的 CSS 对齐有点小问题答案

【问题标题】：I have a slight issue with alignment in my CSS我的 CSS 对齐有点小问题
【发布时间】：2015-04-24 01:42:12
【问题描述】：

我尝试了一些方法，例如使 div 更小（甚至非常小，以查看它们是否彼此相邻）并尝试左右内联块/浮动，但我无法让我的 div 并排，下面是CSS请帮忙

#ContentHome {
    clear: both;
    margin-left: 0;
    width: 79%;
    display: inline-block;
    vertical-align: top;
    border: thin solid #FFF;
    color: #000000;
}
#Side {
    clear: both;
    margin-left: 0;
    width: 20%;
    display: inline-block;
    vertical-align: top;
    font-family: "Myriad Pro", Calibri;
    font-size: 16px;
    border: thin solid #FFF;
    color: #000000;
}

【问题讨论】：

你的 html 看起来怎么样？
新时代的开始

内容在这里

成功历史

更多内容

更多内容在这里
您的问题与 Inline-Block 尊重空格有关。检查我对这个问题的回答：stackoverflow.com/a/29651275/2414886

标签： html css web

【解决方案1】：

看到这个fiddle

请参阅下面更新的css。我所做的是，我从您的css 中删除了clear:both; 和display:inline-block;，并将float:left; 添加到<div>s 中。

CSS

#ContentHome {
    margin-left: 0;
    width: 79%;
    vertical-align: top;
    border: thin solid #FFF;
    color: #000000;
    float: left;
}
#Side {
    margin-left: 0;
    width: 20%;
    vertical-align: top;
    font-family:"Myriad Pro", Calibri;
    font-size: 16px;
    border: thin solid #FFF;
    color: #000000;
    float: left;
}

我在小提琴中使用背景颜色只是为了表明两个 div 正确对齐

【讨论】：

【解决方案2】：

尝试从要并排的 div 中删除 clear:both。

【讨论】：

还是没什么好怕的：/

【解决方案3】：

删除clear: both，然后给他们float: left; http://jsfiddle.net/ydrzcrjp/

【讨论】：

哇，确实如此，这让我想知道我的 HTML 或容器中是否有东西使它仍然是一个在另一个之上

【解决方案4】：

#ContentHome {
    float: left;
    width: 79%;
    border: thin solid #FFF;
    color: #000000;
}
#Side {
    float:left;
    width: 20%;
    font-family:"Myriad Pro", Calibri;
    font-size: 16px;
    border: thin solid #FFF;
    color: #000000;
}

为什么在两个元素中都有clear: both？如果您需要清除元素，请将它们包装起来并将clear: both 设置为包装器。

【讨论】：

新时代的开始

成功历史

看到这个fiddle