问题与流体，响应布局和浮动元素 [英] Issue with fluid, responsive layout and floated elements
问题描述
我正在设计一个基本的双柱流体响应式布局，可以为移动设备进行线性化处理 - 如附图所示 - 使用浮动元素;我遇到了某些元素丢失的问题，可以在我设置的小提琴中查看在这里。出于某种原因，块7与块6的顶部对齐，而不是根据需要在块3下面流动。
我有两个关于这个布局：（1）我怎样才能让块按预期对齐;和（2）是否有可能，比如使用jQuery，重新安排移动块的顺序 - 例如，在某个断点处 - 我在小提琴中使用了678px--我可以说，块6出现在块3下面？
对于第一个问题，我一直在阅读关于使用 inline-block 而不是 float ，但我宁愿不必处理似乎发生的空白问题。但是，如果这是唯一可行的途径，它是否可以以最小化这些怪癖的方式实施？ （我一直使用浮动布局...）
非常感谢这里的任何反馈。
请看看这个，我已经修改了一下你的CSS：
< 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 4> 4< / div> < div class =block 5> 5< / div> < div class =block 6> 6< / div> < div class =block 7> 7< / div> < div class =block 8> 8< / div>< / div>
首先，在原来的小提琴中，必须分配给 .five div的风格，即 float ： 剩下;宽度：30％; height：150px; margin-right：2％; 分配给 .seven div以及必须分配给的样式。七 div，即 float：right;宽度：67％; height：250px; ，被分配给 .five div。此外，我添加了 clear：left; 到 .five div并增加了它的高度。
其次，为了改变盒子的顺序，在某个断点处考虑，只有通过添加另一个 .six .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;颜色：#fff; background-color：＃7f7f7f; font-weight：bold; text-align：center; margin-bottom：20px;} one {float：left;宽度：30％; height：150px; margin-right：2％;}。two {float：right;宽度：67％; height：250px;}。3 {float：left;清楚：离开;宽度：30％; height：150px; margin-right：2％;} four {float：right;宽度：67％; height：250px;}。7 {float：right;宽度：67％; height：250px;}。6 {float：right;宽度：67％; height：200px;}。5 {float：left;清楚：离开;宽度：30％; height：450px; margin-right：2％;} 8 {float：left;宽度：30％; height：200px; margin-right：2％;}。show {display：none;} / * 678 breakpoint ----------- * / @ media only screen and（max-width：678px）{.block {width ：100％！重要; float：none！重要; } .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 6 show> 6< / div> < div class =block 4> 4< / div> < div class =block 5> 5< / div> < div class =block 6 hide> 6< / div> < div class =block 7> 7< / div> < div class =block 8> 8< / div>< / div>
正如你所看到的，在上面的HTML结构中有两个 .six div的实例。首先是< div class =block 6 show> 6< / div> ，它位于 .three div，另一个是在并且在media-query中，我通过设置 .seven < div class =block 6 hide> 6< / div> $ c> div。对于桌面视图，通过在<$ c上设置 display：none ，隐藏了 .six div的第一个实例$ c> .show 隐藏了，并通过设置显示 .six div的第二个实例。在 .hude 上显示：none .six div的第一个实例 display：block on .hide 。
I'm designing a basic, two-column fluid responsive layout that linearizes for mobile-- as depicted in my attached diagram-- using floated elements; and I'm having an issue with certain elements dropping, as can be viewed in the fiddle I've set up here. For some reason, "block 7" aligns with the top of "block 6" instead of flowing below "block 3" as desired.
I have two questions with respect to this layout: (1) how can I get the blocks to align as intended; and (2) is it possible, say using jQuery, to re-arrange the order of blocks for mobile-- for instance, at a certain breakpoint-- I'm using 678px in the fiddle-- I could have, say, "block 6" appear under "block 3"?
For the first question, I have been reading articles and other threads about using inline-block instead of float although I would prefer to not have to deal with the whitespace issue that seems to occur. If this is the only viable route, however, can it be implemented in a way that minimizes these sorts of quirks? (I've always used floats for layout...)
Thanks very much for any feedback here.
Please take a look at this, I have modified your CSS a little bit:
/*-------------------- 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>
First of all, in your original fiddle, the styles which had to be assigned to .five div, i.e. float: left; width: 30%; height: 150px; margin-right: 2%;, were assigned to .seven div and the styles which had to be assigned to .seven div, i.e. float: right; width: 67%; height: 250px;, were assigned to .five div. Moreover, I added clear: left; to .five div and increased its height.
Secondly, as far changing the order of boxes is concerned at a certain break-point, you can achieve that using CSS only by adding another div of .six after .three div and hiding it on desktop and showing it only at the break-point, here's an example (view the code snippet in full page and then resize your browser):
/*-------------------- 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>
As you can see, there are two instances of the .six div in the HTML structure above. First is <div class="block six show">6</div> which is after the .three div and the other is <div class="block six hide">6</div>before the .seven div. For the desktop view, I am hiding the first instance of .six div by setting display: none on .show and inside the media-query, I am hiding the second instance of .six div by setting display: none on .hude and showing the first instance of .six div by setting display: block on .hide.
这篇关于问题与流体，响应布局和浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
