Question

我已经尝试了几个让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;
}

Answer 1

请参阅此fiddle

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

<强> 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正确对齐

Answer 2

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

Answer 3

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

Answer 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设置为包装器。

我的CSS中有一个小问题

4 个答案:

请参阅此fiddle