html中如何将文字放在图片右侧

Question

我正在尝试在正文中设置单独的部分，以在其中显示信息，如下所示

使用float: left;没有帮助，它只会弄乱页面布局。

这是我的 html...

#a,
#g {
  background-color: #6d6d6d;
  color: #bdc3c7;
  list-style: none;
}

#pic {
  margin: +5% 0 0;
  border: 3px solid black;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

<div Id="wrapper">
  <section>
    <ul id="a">
      <li>
        <a href="img/appstore.jpg">
          <img src="img/appstore.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>

  <section>
    <ul id="g">
      <li>
        <a href="img/googleplay.jpg">
          <img src="img/googleplay.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>
</div>

Answer 1

尝试使用float:right

#wrapper ul {
    padding: 0;
    margin: auto;
    width: 80%;
    list-style-type: none;
}

#wrapper ul li {
    background-color: #6d6d6d;
    padding: 30px;
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

#wrapper ul li img {
    float: left;
}

#wrapper ul li .details {float: right;width: 75%;}

    <div Id="wrapper">
      <section>
          <ul id="a">
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
          </ul>
        </section>
    </div>