在文字旁邊對齊圖片

Question

我正在嘗試顯示此圖像中的圖像和文本http://i.imgur.com/qReaDlP.jpg 。 但是我的小提琴面臨2個問題

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像素（您可以根據需要自定義）時將其設置為Apple： 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%;
    }
}