Question

当我的屏幕超过700px时，如何将我的两列放在同一行？

右侧列，最大宽度为600px，左侧列为屏幕的其余部分？

当屏幕小于700px时 - 我想让我的两列宽100％，一列高于另一列

这是我更新的JSFIDDLE ：www.jsfiddle.net/kodjoe/uwkbn5nd/6 /

Answer 1

试试这个：

<style>
#right {
 width:600px;
 height:100px;
 float:right;
 background:#8f8;
}
#left {
 height:100px;
 margin-right:600px;
 float:none;
 overflow:hidden;
 background:#ff8;
}
@media (max-width: 700px) {
#right, #left {
 margin:0;
 float:left;
 width:100%;
}
}
</style>
<div id="right">
Some text for the right column
</div>
<div id="left">
Some text for the left column
</div>

但如果右列具有固定宽度，则可行：600px但不是最大宽度：600px

Answer 2

我会这样做。

div.fullwidth{
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding:0 600px 0 0;
    position:relative;
}
div.left{
    width:100%;
    height:100%;
    background-color:#f00;
}
div.right{
    width:600px;
    height:100%;
    right:0px;
    top:0px;
    position:absolute;
    background-color:#0f0;
}
@media (max-width:700px){
    div.fullwidth{
        padding:0;
    }
    div.right{
        position:relative;
        right:auto;
        top:auto;
        width:100%;
    }
}

并在父元素中包装.left和.right元素（我使用过的类，您可以使用ID＆＃39; s ofcourse）。

<div class="fullwidth">
    <div class="left"></div>
    <div class="right"></div>
</div>

这可以为您提供所需的行为。

如何在同一行中拥有两列的全宽

2 个答案: