如何移动此HTML中的内容

时间:2015-10-16 08:41:46

标签: css

我是CSS的新手,所以如果这是一个简单的请。

请看这个小提琴

http://jsfiddle.net/gn8fy3rc/3/

我想移动文本moneycontrol,除了时间和文本内容与图像对面显示。

我的代码的一部分

<div class="column-a">
   <section class="widget">
      <h4 class="widget-title">Latest News</h4>
      <div id="divRss">
         <ul class="feedEkList">
            <li>
               <div class="itemTitle"><a href="http://www.moneycontrol.com/news/results-boardroom/attrition-to-peak-out-normalise-around-18-20-cyient_3627581.html" target="_blank">Attrition to peak out, normalise around 18-20%: Cyient</a></div>
               <div class="itemDate">
                  10/16/2015, 12:24 PM
                  <div class="Source">moneycontrol</div>
                  <div class="itemContent"><img src="http://www.moneycontrol.com/news_image_files/2015/c/Cyient_200.jpg" alt="Ajay Aggarwal" title="Ajay Aggarwal" border="0" width="75" height="75" hspace="5"> Seventy percent of the margin improvement basically came from rupee depreciation and rest from operational efficiencies and high margin jobs, said Ajay Aggarwal, Senior VP  CFO, Cyient.</div>
               </div>
            </li>
            <li>
               <div class="itemTitle"><a href="http://www.moneycontrol.com/news/results-boardroom/expect-20-topline-growthfy16-sintex-industries_3626821.html" target="_blank">Expect 20% topline growth in FY16: Sintex Industries</a></div>
               <div class="itemDate">
                  10/16/2015, 11:11 AM
                  <div class="Source">moneycontrol</div>
                  <div class="itemContent"><img src="http://www.moneycontrol.com/news_image_files/2015/s/samir-joshipura-200.jpg" alt="Samir Joshipura" title="Samir Joshipura" border="0" width="75" height="75" hspace="5"> Samir Joshipura Group CEO, Sintex is confident of meeting the guidance of 20 percent topline growth in FY16 and margin growth between 50-100 basis points.</div>
               </div>
            </li>

         </ul>
      </div>
   </section>

   <!--widget-->
</div>

请你知道怎么做吗

2 个答案:

答案 0 :(得分:0)

纯CSS解决方案:

.itemContent { display: flex; }
.itemContent > img { min-width: 75px; }
.itemDate > .Source { display: inline-block; }

(因为那就是你用...标记问题的内容)

jsfiddle

答案 1 :(得分:-1)

将日期和源标记放在同一级别,选择内联元素而不是块,以便它们彼此相邻

select