Html 当图像必须在手机模式下居中时，图像会侧向浮动

在桌面模式下，一个

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>

手机CSS:

<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>

.image.left
{
浮动：无；
左：0px
右：0px
}
.image.对
{
浮动：无；
保证金：2E2EM 2E2EM；
}

无需将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;
    }
}

---

用于包含css的媒体查询是什么？css包含的顺序是什么（电话优先还是桌面优先）…我使用的是SKELETON，要附加的第一个样式表是style.css，然后是style-mobile.cst这是HTML代码：