Question

我正在设计一个基本的，双柱流体响应布局，为移动设备进行线性化 - 如我附图 responsive layout diagram 所示 - 使用浮动元素;我可以在the fiddle I've set up here中查看某些元素丢失的问题。由于某种原因，＆＃34;块7＆＃34;与＃34;＃6;＃6;＃3;的顶部对齐而不是在＆＃34;块3＆＃34;下面流动根据需要。

关于这种布局我有两个问题：（1）如何让块按预期对齐; （2）是否有可能，例如使用jQuery，重新安排移动块的顺序 - 例如，在某个断点 - 我在小提琴中使用678px--我可以拥有，说，＆＃34;块6＆＃34;出现在＆＃34;块3＆＃34;？

对于第一个问题，我一直在阅读有关使用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。此外，我将clear: left;添加到.five div并增加其高度。

其次，尽管更改框的顺序与某个断点有关，但只能通过在.six div之后添加另一个.three div并将其隐藏在桌面上来实现这一点并且仅在断点处显示它，这是一个示例（在整页中查看代码片段然后调整浏览器大小）：

/*-------------------- 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> div之前的.seven。对于桌面视图，我通过在.six上设置display: none并在媒体查询中隐藏第一个.show div实例，我隐藏了.six的第二个实例通过在display: none上设置.hude并在.six上设置display: block来显示.hide div的第一个实例。

Answer 2

你可以这样做，但是你必须要小心，你的右边的盒子不会超过左边的高度，或者它不会被折叠，你可能还有其他的对齐问题。将您的内容放在小视口顺序或编号顺序中。

我建议，如果你只想用css的方式做这个，使用flexbox。它在旧版浏览器中并不完全支持，但如果您使用modernizr，则可以使用后备版。 Google＆＃34; flexbox css＆＃34;没有引号和那里有很多教程。

编辑：我刚注意到7不是奇数顺序。我现在暂时离开这个，但明天可能会删除它。

enter image description here

<强>样本：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>

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

2 个答案: