如果HTML在内容之后,我如何推动正确的浮动？

Question

我有一个大多固定的2列布局:

• 第一列占用了所需的空间
• 和第二列有固定宽度并向右浮动

我想让它成为一个响应式设计,所以在较小的屏幕尺寸中,第二列在第一列的下方结束.这意味着第二列的HTML必须位于第一列之后.

我的问题是,当使用该标记时,我似乎无法正确地浮动右列.它最终浮动,但低于主要内容.

这是一个示例代码:

HTML:

<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

CSS:

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    background-color: lightgreen;
}

JS在这里小提琴:http://jsfiddle.net/zinkkrysty/U3fA8/

我也试过使用负边距,但似乎无法做到.

如果您有任何其他方法解决我的问题(除了在第一列设置宽度),请试一试

Answer 1

将它们放入父级并将侧栏的位置设置为绝对位置,然后为响应式显示使用不同的样式集

HTML

<div class="parent">
    <div class='content'>
        sdaohdosahdaf
        <br />adfafhaskldjs sgdafadkfjas
        <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
    </div>
    <div class='sidebar'>
        daobf haohf asod agsdjfa
        <br />sidja ofhad
        <br />sojgh fadpfjas
    </div>
</div>

CSS

.parent {
    position: relative;
}
.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 120px;
    background-color: lightgreen;
}
/* Responsive bit */
@media only screen and (max-width: 320px) {
    .content {
        background-color: orange;
        margin-right: 0px;
    }
    .sidebar {
        background-color: red;
        position: relative;
        width: 100%;
    }
}

例