Question

在桌面模式下，一个img向左浮动而另一个向右浮动。当我在手机模式下，我尝试将它们对准中心，但它们保持浮动状态。

我做错了什么？

HTML

<section>


    <header>
        <h3 class="right">¿Tienes la pantalla rota?</h3>
    </header>
    <p>
        <img class="image left" src="images/moviles/apple/ip4/iphone4.png"/ alt="Cambiar la pantalla iPhone 4, DoctorSmart">
        ¿La pantalla de tu iPhone está rota o tiene manchas extrañas?Tiene solución. DoctorSmart te instalará una completamente nueva para que puedas volver a disfrutar de tu iPhone como el primer día.


    </p>
    <p>DoctorSmart utiliza repuestos de la máxima calidad, ademas de ofrecerte 3 meses de garantía. Para que no tengas que preocuparte por tu smartphone</p>
    <p class="precio">Cambia la  pantalla para tu iPhone 4 por solo 35€, Gastos de recogida y entrega incluidos</p>
    <footer>
        <ul class="actions right">
            <li><a href="#" class="button">Arréglalo</a></li>

        </ul>
    </footer>
</section>

<section>


    <header>
        <h3 class="left">¿El cristal trasero esta roto?</h3>
    </header>
    <p>
        <img class="image right" src="images/moviles/apple/ip4/iphone4back.png" alt="Cambiar cristal trasero iphone 4, DoctoSmart"/>
        Si la parte trasera de tu precioso iPhone 4 tiene arañazos, o esta rota y resquebrajada no te preocupes. DoctorSmart puede cambiar el cristal trasero de tu iPhone en un santiamén, para que vuelvas a fardar de movil.


    </p>
    <p>DoctorSmart utiliza repuestos de la máxima calidad, ademas de ofrecerte 3 meses de garantía. Para que no tengas que preocuparte por tu smartphone</p>
    <p class="precio">El cambio de cristal trasero para tu iPhone 4 sale por solo 35€, gastos de recogida y entrega incluidos</p>
    <footer>
        <ul class="actions right">
            <li><a href="#" class="button">Arréglalo</a></li>

        </ul>
    </footer>
</section>

DESKTOP CSS

/* Image */

.image
{
    display: inline-block;
    outline: 0;
}

.image img
{
    display: block;
    width: 100%;
}

.image.centered
{
    display: block;
    margin: 0 0 2em 0;
}

.image.centered img
{
    margin: 0 auto;
    width: auto;
}

.image.featured
{
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
}

.image.left
{
    float: left;
    margin: 2em 2em 2em 2em;
}

.image.right
{
    float: right;
    margin: 2em 2em 2em 2em;
}

PHONE CSS

.image.left
{
    float: none;
    left: 0px
    right:0px

}


.image.right
{
    float: none;
    margin: 2em 2em 2em 2em;
}

Answer 1

无需将您的 CSS 分为两个文件。您可以使用媒体查询来定位不同的查看端口。请尝试以下操作：

.image {
    display: inline-block;
    outline: 0;
}

.image img {
    display: block;
    width: 100%;
}

.image.centered {
    display: block;
    margin: 0 0 2em 0;
}

.image.centered img {
    margin: 0 auto;
    width: auto;
}

.image.featured {
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
}

.image.left {
    @media (min-width: 768px) {
        float: left;
        margin: 2em 2em 2em 2em;
    }
}

.image.right {
    @media (min-width: 768px) {
        float: right;
        margin: 2em 2em 2em 2em;
    }
}

当图像必须以手机模式为中心时，图像会浮动

1 个答案: