與@media

Question

林有麻煩只是@media CSS3凝視，並在這裏我的麻煩是設置有求必應，我真的不明白，當屏幕進入900px

我知道如何在2分這其@媒體屏幕（最大寬度：900px）{}

，但我不能做內部工作的代碼在2

.row { 
    width: 100%; 
    height: auto; 
    clear: both; 
    float: left; 
} 

.contenido{ 
    width: 985px; 
    margin: 0 auto; 
    text-align: left; 
    clear: both; 
} 

.lenovoDescripcion .contenido { 
    width: 978px; 
    margin: 0 auto; 
    text-align: left; 
    clear: both; 
    padding-left: 3px; 
    padding-right: 4px; 
} 

.lenovoDescripcion .producto { 
    padding-top: 25px; 
    float: left; 
    padding-bottom: 25px; 

} 

.lenovoDescripcion .producto img { 
    width: auto; 
    height: auto; 
    float: left; 
    margin-right: 30px; 
    margin-top: 110px; 
} 

.lenovoDescripcion .descripcion { 
    float: right; 
    text-align: left; 
} 

.lenovoDescripcion .descripcion h2 { 
    color: #0084b0; 
    font-size: 37px; 
    font-weight: normal; 
    height: 43px; 
    overflow: hidden; 
    margin-left: 50%; 
} 

.lenovoDescripcion .descripcion h3 { 
    color: #cc7000; 
    font-size: 29px; 
    font-weight: normal; 
    height: auto; 
    overflow: hidden; 
    margin-left: 35%; 
    margin-top: -10px; 
} 

.lenovoDescripcion .descripcion p { 
    color: #373737; 
    font-size: 16px; 
    font-style: bold; 
    font-weight: normal; 
    height: auto; 
    overflow: hidden; 
    margin-left: 35%; 
    margin-top: 0; 
} 

.lenovoDescripcion .descripcion h4 { 
    color: #c6c6c6; 
    font-size: 16px; 
    font-weight: normal; 
    height: auto; 
    overflow: hidden; 
    margin-left: 35%; 
    margin-bottom: 0; 
} 

.lenovoDescripcion .descripcion h5 { 
    color: #0084b0; 
    font-size: 16px; 
    font-weight: normal; 
    height: auto; 
    overflow: hidden; 
    margin-left: 60%; 
    margin-top: -35px; 
} 

.lenovoDescripcion .descripcion li { 
    font-size: 14px; 
    line-height: auto; 
    color: #7d7c7c; 
    height: auto; 
    overflow: hidden; 
    margin-left: 30%; 
    width: 100%; 
} 

.lenovoDescripcion .descripcion a { 
    text-decoration: none; 
    color: #FFFFFF; 
    border: 1px solid #ff4500; 
    padding: 8px; 
    background-color: #ff4500; 
    margin-left: 60%; 
    transition: all linear .15s; 
} 

.lenovoDescripcion .descripcion a:hover { 
    background-color: #b33000; 
    border: 1px solid #FFFFFF; 
} 

strike { 
    font-size: 16px; 
    margin-left: 35%; 
    color: #c6c6c6; 
} 

hr { 
    display: block; 
    border: 1px dotted #000000; 
    width: 30%; 
} 

footer hr { 
    display: block; 
    border: 1px solid #000000; 
    width: 100%; 
} 

<div class="row lenovoDescripcion"> 
<div class="contenido"> 
    <div class="producto"> 
     <a href="#"><img src="images/Productos/pc2.png"></a> 
     <div class="descripcion"> 
     <h2>IDEAPAD S400</h2> 
     <h5>(59402530)</h5> 
     <h4>Precio de lista</h4 > 
     <strike>$1,399,000.00</strike> 
     <hr> 
     <p>Precio con descuento 10%</p> 
     <h3>$1,259,100.00</h3> 
     <ul> 
      <li>Fully optimized with recognizable touch gestures for the Windows 8.1 experience</li> 
      <li>Added dual-mode functionality to easily convert from a mouse to pointer</li> 
      <li>Winner of the Reddot Design Award</li> 
     </ul> 
     <a href="#" class="comprar"><span>DESCUBRE Y COMPRA</span></a> 
     </div> 
    </div> 
</div><!-- Producto --> 
</div><!-- row --> 

Answer 1

你需要這樣做來劃分與寬度屬性和浮動。這裏是1例如：http://jsfiddle.net/cUCvY/1/

HTML：

<div class="wrapper"> 
    <div id="one">one</div> 
    <div id="two">two</div> 
    </div> 

CSS：

.wrapper { 
    border : 2px solid #000; 
    overflow:hidden; 
} 

.wrapper div { 
    min-height: 200px; 
    padding: 10px; 
} 
#one { 
    background-color: gray; 
    float:left; 
    margin-right:20px; 
    width:140px; 
    border-right:2px solid #000; 
} 
#two { 
    background-color: white; 
    overflow:hidden; 
    margin:10px; 
    min-height:170px; 
} 

@media screen and (max-width: 400px) { 
    #one { 
    float: none; 
    margin-right:0; 
    width:auto; 
    border:0; 
    border-bottom:2px solid #000;  
    } 
}