0

我正在尝试将当前位于图片下方的文本放在图片旁边，但我似乎无法弄清楚。我尝试了很多东西，但它搞砸了。我很确定这很容易解决，但我是菜鸟。:D

http://jsfiddle.net/NmUaX/5/

HTML

    <li class="post" >
        <article class="in-column" style="height:300px;"> <a href="http://yahoo.com"> <p class="article-title" style="font-size:20px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300"></a>
        <p class="excerpt" style="float:left;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <a href="http://yahoo.com"><b>[READ MORE]</b></p></a>
        <p class="excerpt">Born: April 4, 2012, Morristown, AZ</p>
      </article>
      </li>

      </section>
      </section>

CSS

 article.in-column {    
     border-bottom: 1px solid #dddddd;
     text-align: left;
     padding-left: 25px;
     padding-right: 25px;   
     padding-top: 15px; 

 }

 article.in-column .excerpt {
     color: #2f2f2f;
     font-size: 11px;
     margin: 0px;
     padding-bottom: 5px;   

 }

 p.article-title{
         line-height: 19px;
     margin: 5px 0px;
     color: #151515;
     font-weight:bold;
         font-size:16px;
 }
4

2 回答 2

3

用style="float:left;"在你的图片上，而不是你的文字上。

img此外，删除标签中的杂散分号。

如此处所示：

<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300">

JSFiddle

于 2013-10-06T06:36:50.143 回答
2

我认为你需要这样的东西：

 <ul style="list-style:none; width:700px">
     <li style="float:left; margin:5px;width:310px;">
         <ul style="list-style:none">
             <li>
                  <span  style="font-size:20px; padding-bottom:10px;">Grumpy Cat</span>
             </li>
             <li>
                  <a href="http://yahoo.com" style="float:left;margin-right:5px"> 


     </li>
     <li style="float:left;width:380px;">
         <ul style="list-style:none">
             <li>
                  <span style="font-weight:700" >Born: April 4, 2012, Morristown, AZ</span>
             </li>
             <li>
                 Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <a href="http://yahoo.com"><b>[READ MORE]</b></a>
             </li>
         </ul>




     </li>
 </ul>



      see http://jsfiddle.net/NmUaX/15/
于 2013-10-06T06:38:37.797 回答