我一直试图让这项工作连续两天......
我需要的是当div ex3中断时,div ex2会同时中断并使ex3更进一步。当ex3中断时,ex2应该放在ex1和ex3的中间,如下所示:
自:
ex1ex2ex3
于:
EX1
EX2
EX3
...但我能够接受的最远的是:
EX1
ex2ex3
我希望自己足够清楚......
http://jsfiddle.net/60Ludm5m/5/
HTML:
<div id="ultimatebreak">
<div id="ex1"></div>
<div id="breaker">
<div id="ex2"></div>
<div id ="ex3">
</div>
CSS:
#ex1, #ex2{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
}
#ex3 {
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
margin-right:0;
}
#breaker {
border:2px solid grey;
display:inline-block;
min-width:20%;
}
#ultimatebreak {
border:2px solid grey;
width:50%;
display:inline-block;
}
答案 0 :(得分:0)
这是你追求的吗?
#ex1, #ex2, #ex3{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
}
#breaker {
max-width:210px;
display:inline-block;
}
这就是我认为你追求的目标
这是显示它的JSFIDDLE
编辑在您的评论说明您的工作方式后我使用css媒体查询编辑了代码
@media(min-width:320px){
#ex1, #ex2, #ex3{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
}
#wrap{
width:320px;
}
}
@media(min-width:110px) and (max-width:319px){
#ex1, #ex2, #ex3{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
}
#wrap{
width:110px;
}
}
这是使用媒体查询的CSS的JSFIDDLE
我应该补充一点,你需要知道这在旧版本的ie。
中不起作用