我有三个div - 中 - 右,如果文档在移动设备中打开,我需要
在一行中显示左右元素,在它们下面显示中心元素
我需要:
a) PC
[left] [ long text in center ] [right]
b) PC smaller screen !impartant!
[left] [ long text [right]
in center ]
c) Mobile (smaller then 736px )
[left] [right]
[ text in center ]
我找到了(a)和(c)案例的解决方案,但它不适用于中间案例(b)
看:http://jsfiddle.net/66fCm/692/
.wrap {
text-align: center
}
.left {
float: left;
background: grey
}
.right {
float: right;
background: red
}
.center {
text-align: left;
background: green;
margin: 0 auto !important;
display: inline-block
}

<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center | Far far away, behind the word mountains, far from
</div>
</div>
&#13;
答案 0 :(得分:1)
试试这个。在移动屏幕中将100%宽度设置为中心元素。我附上了代码段。
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
text-align: center
}
.left {
float: left;
background: grey
}
.right {
float: right;
background: red
}
.center {
text-align: left;
background: green;
margin: 0 auto !important;
display: inline-block
}
@media only screen and (max-width: 736px) {
.wrap {
text-align: center
}
.left {
float: left;
background: grey
}
.right {
float: right;
background: red
}
.center {
text-align: left;
width: 100%;
background: green;
margin: 0 auto !important;
display: inline-block
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center | A collection of textile samples lay spread out on the table
</div>
</div>
</body>
</html>
答案 1 :(得分:1)
为了使max-width
可折叠,您可以在其上使用@media screen and (min-width: 400px) and (max-width: 550px) {
.center {
display: block;
max-width: 370px;
}
}
并将其设置为显示块。
在div开始折叠时添加媒体查询,例如:
div.center
http://jsfiddle.net/66fCm/693/
更改媒体查询所需的最小和最大宽度,无论您想要{{1}}多大。
答案 2 :(得分:1)
新/改变答案:
如果您更改如下所示的顺序并使用媒体查询,您可以在大屏幕的flexbox和较小屏幕上的组合浮动/非浮动场景之间切换。如下所示。
.wrap {
display: flex;
}
.left {
background: grey
}
.right {
background: red;
order: 2;
}
.center {
background: green;
margin: 0 auto !important;
}
@media (max-width: 500px) {
.wrap {
display: block;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
clear: both;
display: inline-block;
text-align: center;
}
}
<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center | A collection of textile samples lay spread out on the table
</div>
</div>