html - 与@media 有麻烦

Question

我只是盯着@media css3，我的问题是设置响应式，我真的不明白当屏幕达到 900px 时如何将它分成 2

我知道它的@媒体屏幕(最大宽度:900 像素){}

但我不能让里面的代码工作分成 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

您需要使用宽度属性和 float 来做到这一点。这是 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;    
  }
}