Question

我需要使用以下标准创建一个布局两列容器，请建议：

在桌面视图上：

内容位置左侧，当它比侧边栏的高度长时，会在右侧边栏下方流动。
补充工具栏位置。

在移动视图上：

内容流程
内容框下方的边栏流程

最低浏览器支持：

IE8

断点

max-width：768px

问题

我遇到的问题是侧边栏将始终位于内容的顶部而不是下方。

附加说明

我知道如果我声明内容div容器之前，左边两个浮动的侧边栏都可以工作，但这不是我想要的结果，因为我希望内容在边栏上溢出时＃39 ; s比侧边栏的高度长。 解决方案必须仅限CSS和HTML。没有JS

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="sidebar" class="cf">
      <span class="sidebar-heading">Sidebar</span>
    </div> <!-- sidebar -->
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p> 

      <p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque. Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>

      <p>Curabitur aliquet, eros non facilisis sagittis, felis dolor consequat augue, vel tempus sem nisi vitae odio. Duis maximus arcu id enim egestas bibendum. Sed eleifend ex et accumsan fermentum. Vivamus varius sapien vel rutrum vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eget ornare tortor. </p>

      <p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
      <p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p> 

      <p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p> 
      <p>Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>
    </div> <!-- #content -->
  </div><!-- #container -->

  <div class="other-content black cf">
    <div class="other-content-inner">
    <p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
      <p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p> 

      <p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p> 
    </div><!-- .other-content-inner -->
  </div><!-- .other-content -->
</body>
</html>

CSS

    #container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background: #f3f3f3;
}

.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

.other-content {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.other-content-inner {
  padding: 15px;
}

.black {
  background: #000;
  color: #fff;
}

#sidebar {
  float: right;
  width: 300px;
  height: 500px;
  background: yellow;
  margin: 0 0 30px 30px;
  position: relative;
}

.sidebar-heading {
  font-weight:bold;
  font-size: 30px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom:0;
  top:0;
  margin: auto;
  height: 30px;
}

#content {
  display: inline;
}

@media only screen and (max-width: 768px) {
  #sidebar {
    width: 100%;
  }
}

Click here to view my code

Answer 1

让我们以不同的方式看待问题：

源订单是侧边栏，内容，页脚;适用于桌面，不得更改
手机上的显示顺序应该是内容，侧边栏，页脚

我们可以使用CSS弹性框来改变div的显示顺序。

＆＃13;

#container {
  margin: 0 auto;
  max-width: 960px;
}
#sidebar {
  float: right;
  margin: 0 0 30px 30px;
  width: 300px;
  background: #FFFF00;
}
#content {
  background: #F3F3F3;
}
#footer {
  background: #000000;
  color: #FFFFFF;
}
@media only screen and (max-width: 768px) {
  #container {
    display: flex;
    flex-direction: column;
  }
  #sidebar {
    float: none;
    margin: 0;
    width: auto;
    order: 2;
  }
  #content {
    order: 1;
  }
  #footer {
    order: 3;
  }
}

＆＃13;

<div id="container">
  <div id="sidebar">
    <p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
    <p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
  </div>
  <div id="content">
    <p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
    <p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
    <p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
  </div>
  <div id="footer">
    <p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
    <p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
  </div>
</div>

＆＃13;

在较旧的浏览器中，您可以使用display: table-*来获得类似的结果：

＆＃13;

#container {
  margin: 0 auto;
  max-width: 960px;
}
#sidebar {
  float: right;
  margin: 0 0 30px 30px;
  width: 300px;
  background: #FFFF00;
}
#content {
  background: #F3F3F3;
}
#footer {
  background: #000000;
  color: #FFFFFF;
}
@media only screen and (max-width: 768px) {
  #container {
    display: table;
    width: 100%;
  }
  #sidebar {
    float: none;
    margin: 0;
    width: auto;
    display: table-row-group;
  }
  #content {
    display: table-header-group;
  }
  #footer {
    display: table-footer-group;
  }
}

＆＃13;

<div id="container">
  <div id="sidebar">
    <p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
    <p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
  </div>
  <div id="content">
    <p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
    <p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
    <p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
  </div>
  <div id="footer">
    <p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
    <p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
  </div>
</div>

＆＃13;

Answer 2

好。我不确定是否可以在不改变div位置的情况下

所以我提出了一个命题，如果您可以使用jquery和enquire.js来模拟媒体查询，那么这很容易。

看这个演示..

http://codepen.io/anon/pen/xrBAj

或

CODEPEN

只需要添加此脚本

    enquire.register("screen and (max-width:768px)", {
    match : function() { 
            $('#sidebar').insertAfter('#content');
    },
    unmatch : function() {
            $('#sidebar').insertBefore('#content');
    }
}).listen();

如何浮动：断点遇到时从左/右上/下？

在桌面视图上：

在移动视图上：

最低浏览器支持：

断点

问题

附加说明

2 个答案: