html - 为什么我的 CSS 样式没有正确应用？

Question

当宽度> 959px 我要显示的是一列。500px < 宽度 <959px，它将是 2 列。<500px 宽度将是一列。

宽度 >959 像素

500px < 宽度 <959px

宽度 <500 像素

.img-wi{	
        width:100%;
        display: inline-block;
        border:2px solid #13aff2;
    	margin-top:10px;
    }
    @media only screen and (max-width:959px) {
       .left-w{
    	float:left;
    	width:49%
    }
       .right-w{
    	float:right;
    	width:49%
    }}
.text-wi{
        border-top:2px dashed #13aff2;
        padding: 5px 0 0 20px;
    }
    @media only screen and (max-width:500px) {
       .left-w{
    	float:none;
    	width:100%
    }
       .right-w{
    	float:none;
    	width:100%
    }}

<div class="img-wi left-w">
    	<img class="aligncenter" src="/new-1.png" alt="" width="288" height="64">
<div class="text-wi">
    <strong>AAAA</strong><br>
    – A<br>– B<br>– C<br>
    </div>
    </div>
    <div class="img-wi right-w">
    	<img class="aligncenter" src="/new-2.png" alt="" width="288" height="64">
<div class="text-wi"><strong>AAAA</strong><br>
    – A<br>– B<br>– C<br>
    </div></div>

我做错了什么？

任何帮助表示赞赏

标签： htmlcss