我想知道实现这种设计的最佳方法是什么,我想这将是一种响应式的方式。这是一个模型。注意我漂亮的蓝色方块。
现在,这是“移动”版本。当宽度减小到蓝色方块不适合的位置(同时保持其大小)时,它应该低于三个其他内容块。
我认为如果蓝色区块在其左侧立即落在区块下方,这将是完全直截了当的,但这不是客户想要的。你会如何做到这一点?
答案 0 :(得分:3)
对于蓝色块,您可以在高分辨率屏幕上使用float: right
和在低分辨率屏幕上使用display: table-footer-group
,这样您就不需要移动蓝色块或使用隐藏的克隆。
示例:http://codepen.io/anon/pen/Kwdrdy
基本标记
<main>
<aside><div>1</div></aside>
<section>2</section>
<section>3</section>
<section>4</section>
</main>
的CSS
section, aside {
margin: 10px 0;
width: 100%;
border: 1px #ccc solid
}
main {
display: table;
width: 100%;
}
aside {
display: table-footer-group;
}
aside div { background: #c2c1dc; width: 30%; margin: 0 auto; }
@media all and (min-width: 600px) {
main { display: block; }
aside { float: right; width: 30%; margin: 0; }
aside div { width: 100%; }
aside + section { width: 68%; }
}
视口上的屏幕截图&lt; 600px的
视口上的屏幕截图&gt; 600px的
注意:所有浏览器都支持display: table-*
,包括IE8 +
答案 1 :(得分:1)
这应该给你一个不错的起点,利用order
设置订单元素显示:
HTML:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
CSS
div {
background:lightblue;
height:100px;
width:100%;
box-sizing:border-box;
padding:10px;
box-sizing:border-box;
margin:10px;
overflow:hidden;
}
div:nth-child(2) {
width:calc(100% - 130px);
}
div:nth-child(1) {
background:lightgrey;
float:right;
width:100px;
margin:0 10px 0 0;
}
@media screen and (max-width: 500px) {
body {
display:flex;
flex-flow: column;
text-align:center;
}
div, div:nth-of-type(1) {
margin-left: auto;
margin-right: auto;
}
div:nth-of-type(1) {
order:4;
float:none;
}
div:nth-of-type(2) {
order:1;
}
div:nth-of-type(3) {
order:2;
}
div:nth-of-type(4) {
order:3;
}
}
答案 2 :(得分:1)
你可以在this Fiddle看到的旧位置切换怎么样 - 使用媒体查询从绝对到相对?
<div class="content">
<div class="block block1">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block block3">4</div>
</div>
和CSS:
.content {
margin: 0 auto;
max-width: 800px;
position: relative;
}
.block {
box-sizing: border-box;
border: 1px solid red;
height: 50px;
line-height: 50px;
text-align: center;
}
.block1 {
width: 75%;
}
.block3 {
width: 25%;
position: absolute;
right: 0;
top: 0;
}
@media all and (max-width: 350px) {
.block1 {
width: auto;
}
.block3 {
width: auto;
position: relative;
}
答案 3 :(得分:1)
您可以使用flexbox layout mode
(使用@fabrizio中的html元素)
main {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
aside {
width: 100px;
order: 4;
background: lightblue
}
section {
width: 100%;
}
section:first-child {
flex: 1 0px
}
@media screen and (min-width: 700px) {
aside {
order: 0
}
}
/*next rule is for demo only*/
main > * {
padding: 10px;
min-height: 100px;
border: 1px solid #ddd;
margin: 10px;
}
&#13;
<main>
<section>content of section 1</section>
<aside>content of aside 2</aside>
<section>content of section 3</section>
<section>content of section 4</section>
</main>
&#13;