Question

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

但当然我失败了，基本上我试图制作这样的风格，因为看起来这样做很简单？

想要的结果： Wanted style http://img.prntscr.com/img?url=http://i.imgur.com/C5rjjXG.png

我的结果： My Style http://img.prntscr.com/img?url=http://i.imgur.com/cHB1tBe.png

严重失败我知道有人能告诉我如何处理文字位置和内容吗？

非常感谢。

onCreate()

样式代码：

<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,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"/>
        <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>

Answer 1

你可以尝试像这样的somtehing

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

可能听起来很刺耳，但是如果你开始删除所有的CSS，并提供你的图片float:left;并将其移到li的底部可能会让你继续前进。古德勒克

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样式文本未按预期工作

3 个答案: