0

我有一种情况，我有点担心解决方案不可用，因为据我了解，我们无法拆分浮动列内容或浮动列的内部两个部分，并在移动设备或平板电脑上给它们完全不同的位置。我认为position:absolute;为了保持网页的响应性和动态内容不是一个好的选择？

请注意：我的客户希望从桌面到移动，反之亦然。

我已经创建了这个线框，请帮助我如何处理这种情况？

我将感谢关于这个问题的每一个回复/反馈！

这将是左列和右列及其嵌套“DIV”部分的可能代码，我也想将其用于移动和桌面+平板电脑：

.content { background:#dddddd; }
.left-column { float:left; width:60%; background:#5ba5f1; padding:20px; box-sizing:border-box; min-height:600px; }
.right-column { float:right; width: 35%; background:#6fc561; padding:20px; box-sizing:border-box; }
.section1 { background:#e7e265; margin-bottom:20px; border:1px solid #000; min-height:200px; }
.section2 { background:#e7e265; margin-bottom:20px; border:1px solid #000; min-height:200px; }
<div class="content">
    <div class="left-column">Lorem ipsum dolor sit amet, consectetur.....</div>
    <div class="right-column">
    <div class="section1">Section 1 of right column</div>
    <div class="section2">Section 2 of right column</div>
    </div>
    </div>

在此处输入图像描述

4

1 回答 1

1

我将您的 html 更改为以下内容：

<div class="content">
    <div class="right-column">
        <div class="section1">Section 1 of right column</div>
    </div>
    <div class="left-column">Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur.</div>
    <div class="right-column">
        <div class="section2">Section 2 of right column</div>
    </div>

</div>

我想您将使用媒体查询来显示平板电脑和手机的特殊布局，我模拟了在resize()事件中添加“移动”类：

CSS

.content {
    background:#dddddd;
}
.left-column {
    float:left;
    width:60%;
    background:#5ba5f1;
    padding:20px;
    box-sizing:border-box;
    min-height:600px;
}
.right-column {
    float:right;
    width: 35%;
    background:#6fc561;
    padding:20px;
    box-sizing:border-box;
}
.section1 {
    background:#e7e265;
    margin-bottom:20px;
    border:1px solid #000;
    min-height:200px;
}
.section2 {
    background:#e7e265;
    margin-bottom:20px;
    border:1px solid #000;
    min-height:200px;
}

/*/////////////////////////*/
/* Mobile settings*/
/*/////////////////////////*/


.mobile .left-column {
    width:100%;
    background:#ccc;
    min-height:inherit;
}
.mobile .right-column {
    width: 100%;
    background:#ccc;
}

JS

$( window ).resize(function() {
    $(".content").addClass("mobile")
});

工作示例

于 2015-04-09T08:01:53.863 回答