html - 当图像必须在手机模式下居中时，图像会横向 float

Question

在桌面模式下，一个 img 向左浮动，另一个向右浮动。

当我处于手机模式时，我尝试将它们对齐到中心，但它们保持 float 。

我做错了什么？

到目前为止，您可以在下面看到我的代码。

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>

桌面 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;
}

电话 CSS:

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

}

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

Answer 1

无需将您的 CSS 拆分为两个文件。您可以使用媒体查询定位不同的视口(viewport)。尝试以下操作:

.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;
    }
}