流畅、响应式布局和浮动元素的问题

Question

我正在设计一个基本的、两列流体响应式布局，该布局可以针对移动设备进行线性化——如我所附的图表 中所述——使用浮动元素；我遇到了某些元素丢失的问题，可以在the fiddle I've set up here 中查看。出于某种原因，“块 7”与“块 6”的顶部对齐，而不是根据需要在“块 3”下方流动。

关于这个布局我有两个问题：（1）我怎样才能让块按预期对齐； (2) 是否有可能，比如使用 jQuery，为移动设备重新排列块的顺序——例如，在某个断点处——我在小提琴中使用 678px——我可以说，“块 6”出现在“块 3”下？

对于第一个问题，我一直在阅读有关使用 inline-block 而不是 float 的文章和其他线程，尽管我宁愿不必处理似乎发生的空白问题。但是，如果这是唯一可行的路线，是否可以以最小化这些怪癖的方式实施？ （我一直使用浮点数进行布局...）

非常感谢您在这里的任何反馈。

Answer 1

请看一下，我对你的 CSS 做了一点修改：

/*-------------------- clearfix --------------------- */

.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}
/*-------------------- main --------------------- */

.container {
  max-width: 960px;
  padding: 2%;
}
.block {
  font-family: sans-serif;
  color: #fff;
  background-color: #7f7f7f;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.one {
  float: left;
  width: 30%;
  height: 150px;
  margin-right: 2%;
}
.two {
  float: right;
  width: 67%;
  height: 250px;
}
.three {
  float: left;
  clear: left;
  width: 30%;
  height: 150px;
  margin-right: 2%;
}
.four {
  float: right;
  width: 67%;
  height: 250px;
}
.seven {
  float: right;
  width: 67%;
  height: 250px;
}
.six {
  float: right;
  width: 67%;
  height: 200px;
}
.five {
  float: left;
  clear: left;
  width: 30%;
  height: 450px;
  margin-right: 2%;
}
.eight {
  float: left;
  width: 30%;
  height: 200px;
  margin-right: 2%;
}
/* 678 breakpoint ----------- */

@media only screen and (max-width: 678px) {
  .block {
    width: 100% !important;
    float: none !important;
  }
}

<div class="container cf">
  <div class="block one">1</div>
  <div class="block two">2</div>
  <div class="block three">3</div>
  <div class="block four">4</div>
  <div class="block five">5</div>
  <div class="block six">6</div>
  <div class="block seven">7</div>
  <div class="block eight">8</div>
</div>

首先，在您原来的小提琴中，必须分配给.five div 的样式，即float: left; width: 30%; height: 150px; margin-right: 2%;，分配给.seven div，而必须分配给.seven div 的样式，即float: right; width: 67%; height: 250px;，被分配到.five div。此外，我在.five div 中添加了clear: left; 并增加了它的高度。

其次，就在某个断点改变盒子的顺序而言，您可以通过在.three div 之后添加另一个.six div 并将其隐藏在桌面上并仅显示它来实现这一点在断点处，这里有一个例子（在整页中查看代码 sn-p 然后调整浏览器的大小）：

/*-------------------- clearfix --------------------- */

.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}
/*-------------------- main --------------------- */

.container {
  max-width: 960px;
  padding: 2%;
}
.block {
  font-family: sans-serif;
  color: #fff;
  background-color: #7f7f7f;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.one {
  float: left;
  width: 30%;
  height: 150px;
  margin-right: 2%;
}
.two {
  float: right;
  width: 67%;
  height: 250px;
}
.three {
  float: left;
  clear: left;
  width: 30%;
  height: 150px;
  margin-right: 2%;
}
.four {
  float: right;
  width: 67%;
  height: 250px;
}
.seven {
  float: right;
  width: 67%;
  height: 250px;
}
.six {
  float: right;
  width: 67%;
  height: 200px;
}
.five {
  float: left;
  clear: left;
  width: 30%;
  height: 450px;
  margin-right: 2%;
}
.eight {
  float: left;
  width: 30%;
  height: 200px;
  margin-right: 2%;
}
.show {
  display: none;
}
/* 678 breakpoint ----------- */

@media only screen and (max-width: 678px) {
  .block {
    width: 100% !important;
    float: none !important;
  }
  .hide {
    display: none;
  }
  .show {
    display: block;
  }
}

<div class="container cf">
  <div class="block one">1</div>
  <div class="block two">2</div>
  <div class="block three">3</div>
  <div class="block six show">6</div>
  <div class="block four">4</div>
  <div class="block five">5</div>
  <div class="block six hide">6</div>
  <div class="block seven">7</div>
  <div class="block eight">8</div>
</div>

如您所见，上面的 HTML 结构中有两个 .six div 实例。第一个是<div class="block six show">6</div>，它在.three div 之后，另一个是<div class="block six hide">6</div>，在.seven div 之前。对于桌面视图，我通过在.show 上设置display: none 来隐藏.six div 的第一个实例，在媒体查询中，我通过在@ 上设置display: none 来隐藏.six div 的第二个实例987654345@ 并通过在.hide 上设置display: block 来显示.six div 的第一个实例。

Answer 2

你可以这样做，但你必须小心你的右框不要超过左框的高度，否则它不会折叠在下面，你可能会遇到其他对齐问题。将您的内容按小视口顺序或编号顺序排列。

我建议，如果你只想有一个 CSS 方式来做这件事，使用 flexbox。旧版浏览器不完全支持它，但如果你使用modernizr，你可以有一个后备。谷歌“flexbox css”没有引号，有很多教程。

编辑：我刚刚注意到 7 不是奇数顺序。我暂时保留它，但明天可能会删除它。

演示：http://jsfiddle.net/aut5haxv/1/

CSS

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both
}
.container {
    max-width: 960px;
    padding: 2%;
    box-sizing:border-box;
    border:1px solid blue;
}
.container .column:nth-child(odd) {
    width: 30%;
    float: left;
}
.container .column:nth-child(even) {
    width: 68%;
    float: right;
}
.column {
    font-family: sans-serif;
    color: red;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid red;
    margin-bottom:2%;
}
.one {
    height: 150px
}
.two {
    height: 250px
}
.three {
    height: 250px;
    clear:left;
}
.four {
    height: 450px
}
.five {
    height: 450px;
}
.six {
    height: 350px
}
.seven {
    height: 250px
}
.eight {
    height: 200px;
}
@media only screen and (max-width:678px) { 
    .container .column:nth-child(odd),
    .container .column:nth-child(even) {
        width: 100%;
        float: none;
    }
}

HTML：

<div class="container clearfix">
   <div class="column one">1</div>
   <div class="column two">2</div>
   <div class="column three">3</div>
   <div class="column four">4</div>
   <div class="column five">5</div>  
   <div class="column six">6</div> 
   <div class="column seven">7</div>
   <div class="column eight">8</div>
</div>