css - 简单的 HTML/CSS 对齐调整大小

Question

以下代码在每个导航器和宽度超过 600 像素的屏幕分辨率上都运行良好。但是，在小屏幕上，当我调整窗口大小时或在小智能手机屏幕上查看时，我的图像会出现在文本下面...

    <div id="messagedisp">
        <div id="messagedisp-left">
            <img src="http://lorempixel.com/400/200" width="86" height="185" id="messagedisp-inner">
        </div>
        <div id="messagedisp-right"><p>Long paragraph text about 500 chars</p>
        </div>
    </div>

您可以通过手动调整屏幕宽度来准确模拟问题。在这里你有:https://jsfiddle.net/ch7fuc8o/1/

你知道如何用更“简单”的方法解决这个问题吗？

Answer 1

我有一些建议可以使代码更好更易于维护:

1. 使用semantics标签
2. 使用flexbox用于组织而不是 float 。
3. 使用media query适应手机屏幕

/* default appearance */

article > * {
  padding: 20px;
}

/* Flexbox */

article {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

@media screen and (min-width: 600px) {
  article {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  article > * {
    -webkit-flex: 1;
    flex: 1;
  }
  article > div {
    -webkit-flex: 3;
    flex: 3;
  }
}

@media screen and (max-width: 600px) {
  article {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

<article>
  <img src="http://lorempixel.com/400/200" width="86" height="185" />
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sint, quis animi! Eum illum mollitia odit at cupiditate quas qui animi, voluptas harum maxime? Architecto vitae sint id libero! Minima harum facere, corporis consequuntur ipsa dicta neque
    incidunt illo ad inventore iusto, soluta, enim blanditiis tempora ratione? Deleniti nihil, aspernatur facilis fuga quasi ipsam earum animi optio asperiores ut temporibus explicabo nisi maxime dicta illo assumenda? Accusantium reiciendis quasi modi!
    Qui voluptas, voluptatem aut reprehenderit magni cupiditate omnis odit? Blanditiis, suscipit, odit? Rerum distinctio quos veritatis necessitatibus recusandae fugit dolore, quia, incidunt, odit labore laborum accusamus aliquid similique voluptas libero
    ratione ullam doloremque quaerat porro rem, blanditiis fugiat est. Aliquid dolorum fuga praesentium expedita odit, fugit ipsam ullam eligendi impedit, inventore qui veritatis odio cum sapiente at dolorem ex, excepturi. Tempore eum tenetur illum rerum
    dolore aperiam id ex assumenda eligendi ad nulla repellendus expedita officia provident fuga ipsa quibusdam, nesciunt sequi delectus, adipisci veritatis suscipit qui. Atque a aliquam magni culpa eum vero autem distinctio provident, omnis exercitationem?
    Saepe dolor voluptas voluptatum iusto quidem nostrum, rerum incidunt beatae alias ipsum sunt non in distinctio debitis provident minima hic deserunt soluta. Architecto unde eligendi iure esse omnis ab, nam accusamus recusandae! Sapiente, dolorum corporis
    debitis laudantium fuga soluta rem sunt reiciendis similique? Esse vero vel obcaecati quam asperiores doloremque odit dolores pariatur ut assumenda ullam repellat dicta, iste modi est, dolorem consequuntur, molestias vitae. Voluptatem officia, explicabo!
    Sint perspiciatis ab odit maxime totam id eum ipsum assumenda suscipit! Praesentium, a, aliquid sit laudantium minus odio excepturi nobis, nihil fugiat soluta quo tenetur debitis aperiam officia facilis! Porro in, ut et omnis. Earum pariatur quae,
    nulla quibusdam quidem fuga molestias, vero eius harum praesentium ratione magni culpa quia distinctio ducimus ea eos doloremque unde similique asperiores repellat, necessitatibus dolorum sunt? Quidem, aliquam. Cum corrupti eveniet laborum! Ex porro
    commodi adipisci, laudantium inventore temporibus tempora quo voluptate omnis saepe ab at aliquid, incidunt deleniti optio perspiciatis obcaecati! Veniam id, nostrum obcaecati rerum harum necessitatibus! Aliquid aspernatur nam saepe dolores ipsam
    voluptas reiciendis molestiae modi neque sunt, nobis, consequatur sed aliquam. Ut, tenetur dolor delectus at, sit repellendus veniam nam cumque itaque tempore facilis et atque dignissimos consectetur libero harum! Consequatur iure sequi, ratione tempora.
    Totam doloremque, sequi voluptate maiores. Illo natus corporis pariatur vel cumque molestiae hic saepe illum nemo voluptatem tempore, sequi repellat impedit optio molestias eaque iure quas dolor, assumenda veritatis laborum fugit porro sed. Necessitatibus
    quisquam maiores ut neque soluta harum, odit deleniti labore, culpa illum ad explicabo doloremque! Beatae culpa debitis, natus excepturi adipisci magni, iste dolor dolorem odio rerum! Id suscipit itaque accusamus incidunt, laborum blanditiis deserunt
    rem totam doloribus debitis non molestiae perferendis vitae necessitatibus corporis eum quas explicabo ab odio. Fuga porro iure corporis vitae cumque in quod deleniti autem ducimus alias perspiciatis cupiditate distinctio dignissimos doloribus ipsam,
    delectus quam blanditiis accusantium inventore nesciunt. Excepturi reprehenderit laborum doloremque voluptatibus. Temporibus, sed, maiores. Illo dolorum cum culpa ratione, nam amet dicta vero ut reiciendis, dolor facilis.</div>
</article>