Question

这里是jsFiddle

#wrapper {
    margin:1px;
    height:auto;
    width:auto;
    float:left;
    clear:both
}
#wrapperR {
    margin:1px;
    height:auto;
    width:auto;
    float:right;
    clear:both;
}

在我的页面中看起来像这样

  L
   R

但我希望它看起来像LR 我希望将其内容及其所有内容保留下来保持正确并排。

我已经明确指出：两者;对于这两个div，我甚至创建了一个.clear {clear：both;}并且我调整了宽度，填充和边距，但我仍然不能将它们并排浮动。

我想知道我在看什么。

谢谢！

Answer 1

从

中删除clear:both

#wrapperR {
margin: 1px;
height: auto;
width: auto;
float: right;
clear: both; /* REMOVE THIS LINE*/
}

<强> jsFiddle example

此处的clear:both规则意味着此元素将位于其前面的任何浮动元素下方。

Answer 2

errrr。肯定清楚：两个都是你的问题？这会阻止他们站在一边。

也尝试将它们显示在内联块中：

display:inline-block

Answer 3

将这些mod放在你的css上：

#wrapper{margin:1px; height:auto; width:auto;float:left;}
#wrapperR{margin:1px; height:auto; width:auto; float:right; }
#column_l {
    width: 60%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    float:left;
}
#column_r {
    width: 40%;
    margin: 0;
    margin-right:5px;
    float: left;
    background-color: transparent;
    position: absolute;
    left:60%;

}

从clear:both和wrapper

中删除column_[l|r]

如果您希望右列更高（“附加到菜单”），则必须使用属性top: -X px

Answer 4

#wrapper p {
   position : relative;
   float: left;
}

并调整您的文字以便浮动

div left和div right并不在容器中并排浮动

4 个答案: