将图像对齐文本旁边

Question

我正在尝试显示此图像http://i.imgur.com/qReaDlP.jpg中的图像和文字。但我在fiddle

上面临两个问题

1. 背景图片无法显示。
2. 即使空间合适，内容也会堆叠起来。我相信它在代码中有一些额外的填充/边距但不确定在哪里。

HTML

<section class="freedom_carousel">
  <ul class="two-col">
    <li class="pen"> 
      <span class="icon-text"> <em>THis is </em> text text text</span> 
    </li>
    <li class="phone"> 
      <span class="icon-text"> <em>THis is </em> text text text</span> 
    </li>
    <li class="arrow"> 
      <span class="icon-text"> <em>THis is </em> text text text</span> 
    </li>
    <li class="download"> 
      <span class="icon-text"> <em>THis is </em> text text text text</span>   
    </li>
  </ul>
</section>

Answer 1

你的风格需要一些认真的改造，看看这里：DEMO

HTML

<section class="freedom_carousel"> <!--Freedom section -->
  <ul class="two-col left-col">
    <li class="pen"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
    <li class="phone"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
  </ul>
  <ul class="two-col right-col">
    <li class="arrow"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
    <li class="download"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
  </ul>
</section>

CSS

.left-col, .right-col {
  list-style: none;
  width: 50%;
  float: left;
  margin: 0;
  padding: 0;
}

.two-col li {
  padding-left: 30px;
}

.two-col li.pen{
  background: url("https://cdn2.iconfinder.com/data/icons/inverticons-stroke-vol-3/32/pen_write_edit_sketch_draw_compose-20.png");
  background-repeat: no-repeat;
}

<强> 编辑： 以下是针对您的移动需求的示例媒体查询。当屏幕尺寸小于450像素宽时，它目前设置为苹果（您可以根据需要自定义）：DEMO2

@media (max-width:450px) {
    .freedom_carousel ul.two-col li span.icon-text {
         text-align: center; 
    }
    .left-col, .right-col {
        width: 100%;
    }
    .two-col li {
        padding-left: 0px;
        text-align: center;
        padding-top: 50px;
    }
    .two-col li.pen, .two-col li.phone, .two-col li.arrow, .two-col li.download  {
        background-position: 50%;
    }
}