我只是盯着@media css3,我在这里的麻烦是设置响应,我真的不知道如何在屏幕变为900px时将其除以2
我知道它的@ media屏幕(最大宽度: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 -->
答案 0 :(得分:0)
您需要使用width属性和浮点数。这是一个例子: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;
}
}