css - 媒体查询删除 float : but does not set text width:auto on small screens

Question

这是媒体查询:

@media (max-width: 480px){
html {font-size: 100%;} 
.column.third, .column.two-thirds 
{float: none;
width: auto;}

这些是媒体查询中引用的 div 的样式(我不确定这是否会产生影响，但我包含了列嵌套在其中的容器 div 的 CSS)。

.column {
    display: block
    font-size: 0.9rem;
    font-weight: 600;
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    }

    .column.two-thirds { width: 66.7%; }
    .column.third { width: 33.3%; }

.container {
     max-width:1000px;
     margin: 0px auto 30px auto;
     width:90%;
     box-shadow: 0 0 5px #888;
     overflow:hidden;
     background-color: white;
    }

这是 HTML:

<div class="container">
  <div class="row clearfix">>    
    <div class="column two-thirds">
      Hello World!      
    </div>
    <div class="column third">
      Hello World! 
    </div>
  </div>
</div>

Answer 1

与同事一起解决了这个问题。问题在于我在样式表中组合 .column 和 .(width percentage) 类选择器的方式。通过将 .(width percentage) 选择器与 .column 选择器分开，媒体查询可以在浏览器时正确设置 with:auto处于指定的最大宽度。