Question

这就是我想要实现的目标：

DIV1 50%          |          50% DIV2 |
DIV1 50%      |      50% DIV2 |

并且在宽度之后（用户缩小窗口，假设低于300px）

DIV1 100%       |
DIV2 100%       |

所以我想要一个换行符并且是100％。

这是我到目前为止：

<div>50%</div>
<div>50%</div>

div
{
    float: left;
    background-color: red;
    width: 50%;
    min-width: 300px;
}

http://jsfiddle.net/MYs96/

但这没什么好处，他们不能100％。我听说过媒体查询（我是新手），是否可以解决这个问题？如果我不想使用mediaquery？

Answer 1

你可以用这个

div {width:50%; float:left;}

@media all and (max-width: 300px)  {
  div { width:100%; float:none;}
}

Example

More information about media queries

Answer 2

试试这个

div
{
    float: left;
    background-color: red;
    width: 50%;
    min-width: 300px;
@media only screen and (max-width: 500px) {
          width: 100%;
         } 
}

div旁边的div，50％-50％，经过最小宽度，换行和100％

2 个答案: