CSS 样式文本未按预期工作

Question

嗨，我刚开始使用 CSS 我发现这种风格看起来很简单，所以我想为什么不尝试让它学习如何更好地使用 CSS，

但是我当然失败了，基本上是在尝试制作这样的样式，因为它看起来很简单，对吗？

想要的结果：

我的结果：

严重失败我知道谁能告诉我如何做文本位置和东西？

非常感谢。

<div class="menu">
<ul>
    <li>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJGaeBPpPWONWkvBvhN3GcQxb_RVoIyAY7AxKuUuKFf0LFNkAUFVbuAZmEUtihSS0de0zFDx9v"/>
        <h3><a href="index.html">Jetliner with 155 on board loses chassis during takeoff in Russia</a></h3>
        <span>Pravda - </span><span>Mar 9, 2016</span>
        <p>A Boeing 737-400 en route Tyumen-Novy Urengoy lost chassis during takeoff on March 9 in Russia. Representatives of Yamal airline told ...</p>
    </li>

    <li>
        <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAGQAZAMBIgACEQEDEQH/xAAcAAABBAMBAAAAAAAAAAAAAAAABAUGBwECAwj/xAA3EAACAQMCBAQDBwMEAwAAAAABAgMABBEFEgYhMUETUWFxFCKBByMyQpGhwTOx0VJi8PEWJCX/xAAZAQADAQEBAAAAAAAAAAAAAAAAAgMBBAX/xAAfEQACAgMBAAMBAAAAAAAAAAAAAQIRAxIhMSJBURP/2gAMAwEAAhEDEQA/ALxoopJcajawD55lz5A5NY3QCutZJEjUs7KqgZJJwBUcuOI5ZQFsYGyc/MyMw/UDFIpXu7sYuwWjIydw/brypJZEgJFPrFnAAWZmU/mVcitxqtmQp8XG7oCDn9KiVjbvcOPu9yeH8u8+RpWbW5zslnEfLmQSF/bFKsjfhtUSFtVs0cI821j2KkfxW41KyKhviosHplsVFk0m4uboCBvEiQYMjMc5p9ttCgQlpiXzj5egrVKTYcHGG6t52KwzRuw6hWBxXaucMMcK7YkVB5AV0qpgUUUUAFFFFACO4s5Jy266kCk8lAGAPKmi84aeYkx3WAfysp6+fWpHWD0pXBP0CB3Vymil4J2aWOFkRii5wWz2zXC54ss4ZYYo4pVywyxiHy/QGnPWrSBbi8d8E3Ey7ge20cj+9QHS7O5utXu711D/AA8jJGjnaCc+dccKfyKv8LHF1HcxKLJgqkD58dvL39KUh5474IsSm22/iK8yf+6idg0t3IzWTPD4TlWIXIbAyQV7jNSWxlmEO252LlflkQ5T38xV0TYu0edZLiYIoVMnAHlnGaeB0qq+OOI20u1i0rTlffc4V7rPIAHouO+T1/4LK0qSWXTLSS4/rPCjP7kDNUg7QNUKqKKKcwKKwTWaACiiigAoNFFAFbfbBaSS6BcSW+8S280UylCQR1U9PQ1HdCm1C10lVvr5HR05mYDow8+v71ZPFECSxSrKVCNCck+hzUVurFZfhzEQgljBUgAhD0OK8+Lpzj+M6oRTphoPEtnYKLMtDLKd2CWOSScn3HtWdX4mitrgQmLx5iMlE+VEHmaQXGl3EbR/Fag1wqHlvxnP0FN9/YQHXn+MhieGcA7Zc7GwPSn27VlP5r1IdL7wdZeG0vbcQtHIsocqR0/LjHqP1qx7O8iESxsDGEAUFuQOB2qCaPaWl3em6S8dUEmJgr/gbswY9qYdN1e9utYe1fUZ4YRIyxzINx27uhBz1AFEZ5IqxZ41J0W+L+0LFRcw7h1G8ZFJbjWbeJ2RcsR1OcCo1caXc20cU7a1cTLvyYzEi7sc/wAQ+lInnmmvY4LTwviXDMvjHCqoHNmPlVHln4SjiT6x217XJfhCPifgVZgA4zvYf7R1J9qdIeJtK8Nf/ZYcvzI2aqRdI4iutQn1C/lFzepvWGK3zIMdtuOWCcfTrSgrxJavFLJpF/uVg3yWjv0PotCyTRR4oNFty69pUBUT39vCzDcFlkCnHng0VVHEfBOtcQakdRFytu0iKHR0YEkcs4A8sUVRT4czRdVYY8qzUA+0jiZrG0u7GENGQqeJK2CNrciANwJ6j/maqKdF4gh1jiTVtH8RJFtotoVSCMHIb36jNQDg/UJ04YuLOWVmm0/UJYVZiSduAcfqTST7Lmf/AMiaVEkS3Nq8ZfqC25Tz6Y5D16Gn7WLCGylvEtQqieZp2x/qbmf3rzpS1zyi/tI68cbSa+jbT7xbppWuJpVZeSlIywBP0NK9cjjfQXuBeTTyW/3ilYjz7YIxyqJWuqR2bPBczPbNnIkTnTrq2uQJoMk3x11dxBgH6AP6VSMVZaUuWL/s/uFtZ40nf769jed4yOSpkKufU/MfYVI7rRrZtf8AFiiXZIEdlUct3PP9hVOaDd3l/wAQG48ZYJCQxkdsLGnTHsAP271bOi6pcLd/D3KqZA21mz+Ycv4p8ka4RjJvo78SOIktUQnluOM+w/imVLY3U33SYmcYZj2HvS/VZjcy5HNI8qCO/PnTnoFl4wRwMBSC3tSVvMZS0iO+iaRDptuNoBlYfM2OnoKdKKK7EklSONtt2wooorTBPfXttYWkl1ezJDBGMu7nkKoD7SuKbHiHUw9hHIII02Zcf1DnmcdvSuHG3G2pcR3DJIqQ20bEwwrhwB5t23VDZHYSZlwUYciOWDTUZY+aPxVf2E4Z5Pi4AArQsACqj/Se2B9KnS3ltq1gLuxl8SJuRHRkPkR2NVQ8JONr5Pbd1/Wlej6nc6PfePFkjpNDnAlX/I86hmwqXV6WxZtOPwkOo6bJdXSx7eRPXNbcSmHT9Hh0s4VmUzHvgKMD9z+1SYrY31hDqFlLvilG5fMHupHYjpioHxq//wBCG4Yklo9uD2C/9mo4m90mXy1o2hXwDxDHoWsxXd3aieFl8IwqcEJyIPPOTkf351OuH7m/17UdQ1++i+HtLubdYw9G8MDAJ98f37YqpbNGcGdhiM5A/wB5/wAVYPAPEpO3RdQfJ62shP1KH+P08q6M8Xpw5sTW3Sa6lfQ2dlJcSERRxLliP7VL+Erqzv8AQrW8sGLRzLltx+YMOTKfUHIqkPtK1vbd2+mRN8iESz47n8oP05/UUp4G4xueG5p1wJrCRRM8JPRuhK+R5e1LhhUbZuadui/6KbtC1qx13T0vdPl3xt1U8mQ+TDsacaqTCiiigDyDIx3HnXJnGMHmPKt7llL5UbfMUnJpxUdll2jkOldvGhuFAJ2TL0pBM6xqHkOF7DuaT7pGIk5Rqxyo6k1lhQ82uq3mlMxspQEY/eQv+Fj5111C+TWVheWMxeEx3AHIb0FNro0kLyMd3hrnpzz5VotwCoC8lHICl0jdj7yqhw8TxH5DAUYAHYV1hGWZ+jAjaw6jHcUktzhSxrt4pSPAHuacma6xNLcP8TO5klZyXY9STRbzFrEbTzTKt7GsMviQHeRzpJZsY5mib8LjFAEs4e4nv+H5IL/T5MYAWWM/hkXyI+lX5wdxZYcVaf8AEWjBJ0A8a3Y/NGf5HrXmO1YZe1kJ65U04aJq17oOspd6ZMY5YyB6MO4I7j0rGrBM9WUVE9B490fUdNjnvLmKyuPwyQyN0I7jzFYpaGs80SdTWsIDOA3Ss0U7MG1mM94PE5jOAOwpQ53XGD0HSs0ViNF8Dk2yKcYZRn1poi5EgdjiiihmDlbk+Evua3JPhj1NFFaYYlP3ApOv9RT3BrFFAIU3J2PFIvJs0vCKJi2OZ61iigCZcG6RZ6rps097HvkW4ZAfIBV/zRRRQB//2Q=="/>
        <h3><a href="index.html">How Much Should You Spend on College and Student Loans?</a></h3>
        <span>Black Enterprise - </span><span>Apr 20, 2016</span>
        <p>The National Center for Education Statistics has a website that can help you calculate costs. CNN Money's College Cost Calculator is a great ...</p>
    </li>

</ul>
</div>

样式代码：

<style>
    body {
        background-color: white;
    }
    ul
    {
        list-style-type: none;
    }

    .menu ul li
    {
        margin: 15px;
    }

    img
    {
        vertical-align: middle; /* | top | bottom */
        width: 80px;
        height: 80px;
    }
    .menu ul li h3{
        display: inline-block;
        vertical-align: top;
    }

    .menu ul li span{
        display: inline-block;
        vertical-align: middle;
    }

    .menu ul li p
    {
        display: inline-block;
        vertical-align: bottom; /* | top | bottom */
    }
</style>

Answer 1

听起来可能很刺耳，但是如果您开始删除所有 css，然后将您的图片 float:left; 移到 li 的底部，您可能会继续你的方式。祝你好运

Answer 2

你可以试试这样的

#container{
  width: 500px;
 height: 200px;
 
}
#imgContainer{
  width: 30%;
  height: 100%;
  float:left;
  
}
#imgContainer img{
  width: 100%;
  height: 100%;
}
#textContainer{
padding:12px;
float: left;
}

  <div id="container">
   <div id="imgContainer"><img src="http://lorempixel.com/200/400/" alt=""></div>
 <div id="textContainer">
     <h2>Hello world this is some text </h2>
     <p> and here is some smaller text </p>
 </div>
  
 </div>

`

Answer 3

您可以将 <li> 中的元素放入 <section> 并应用此 link

中的样式

      <ul>
    <li>
      <section>
        <div class="left">
          <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJGaeBPpPWONWkvBvhN3GcQxb_RVoIyAY7AxKuUuKFf0LFNkAUFVbuAZmEUtihSS0de0zFDx9v" />
        </div>
        <div class="right">
          <h3><a href="index.html">Jetliner with 155 on board loses chassis during takeoff in Russia</a></h3>
          <span>Pravda - </span><span>Mar 9, 2016</span>
          <p>A Boeing 737-400 en route Tyumen-Novy Urengoy lost chassis during takeoff on March 9 in Russia. Representatives of Yamal airline told ...</p>
        </div>

      </section>
    </li>
  </ul>

查看对原始代码的修改：

https://jsfiddle.net/xwaLsd8p/

CSS 样式文本未按预期工作

CSS style text is not working as expected

html

css