如何在HTML/CSS中完成此布局？

Question

为什么浮动元素没有正确排列？我的图像有一些空白区域,我不知道它来自哪里.

期望的外观:

代码:

.inner-wrapper { float: left; width: 100%; color: #000; }

.feature-1 { float: right; margin: 0 auto; width: 50%; height: auto; }
.aside-image-1 { float: left; margin: 0 auto; height: auto; width: 50%; }

.feature-2 { float: left; margin: 0 auto; width: 50%; height: auto; }
.aside-image-2 { float: right; margin: 0 auto; height: auto; width: 50%; }

.feature-3 { float: right; margin: 0 auto; width: 50%; height: auto; }
.aside-image-3 { float: left; margin: 0 auto; height: auto; width: 50%; clear: both; }

<section class="inner-wrapper">
    <aside class="aside-image-1">
        <img src="https://s13.postimg.org/xsvgi16hv/feature_1.jpg" title="someText" alt="someText">
    </aside>
    <article class="feature-1">
        <h3>In-Store Interactive Tablet</h3>
        <p>Shoppers can use Sellr's Help Me Choose feature to</p>
    </article>
</section>
<section class="inner-wrapper">
    <aside class="aside-image-2">
        <img src="https://s13.postimg.org/t89a33msj/feature_2.jpg" title="someText" alt="someText">
    </aside>
    <article class="feature-2">
        <h3>In-Store Interactive Tablet</h3>
        <p>Shoppers can use Sellr's Help Me Choose feature to</p>
    </article>
</section>
<section class="inner-wrapper">
    <aside class="aside-image-3">
        <img src="https://s13.postimg.org/9ex6ae9er/feature_3.jpg" title="someText" alt="someText">
    </aside>
    <article class="feature-3">
        <h3>In-Store Interactive Tablet</h3>
        <p>Shoppers can use Sellr's Help Me Choose feature to</p>
    </article>
</section>

Answer 1

检查一下......

使图像的宽度为100%,文本对齐中心

.inner-wrapper {
  float: left;
  width: 100%;
  color: #000;
}
.feature-1 {
  float: right;
  margin: 0 auto;
  width: 50%;
  height: auto;
  text-align: center;
}
.aside-image-1 {
  float: left;
  margin: 0 auto;
  height: auto;
  width: 50%;
}
.feature-2 {
  float: left;
  margin: 0 auto;
  width: 50%;
  text-align: center;
  height: auto;
}
.aside-image-2 {
  float: right;
  margin: 0 auto;
  height: auto;
  width: 50%;
}
.feature-3 {
  float: right;
  margin: 0 auto;
  width: 50%;
  height: auto;
  text-align: center;
}
.aside-image-3 {
  float: left;
  margin: 0 auto;
  height: auto;
  width: 50%;
  clear: both;
}
.aside-image-1 img {
  width: 100%;
  float: left;
}
.aside-image-2 img {
  width: 100%;
  float: left;
}
.aside-image-3 img {
  width: 100%;
  float: left;
}

<section class="inner-wrapper">
  <aside class="aside-image-1">
    <img src="https://s13.postimg.org/xsvgi16hv/feature_1.jpg" title="someText" alt="someText">
  </aside>
  <article class="feature-1">
    <h3>In-Store Interactive Tablet</h3>
    <p>Shoppers can use Sellr's Help Me Choose feature to</p>
  </article>
</section>
<section class="inner-wrapper">
  <aside class="aside-image-2">
    <img src="https://s13.postimg.org/t89a33msj/feature_2.jpg" title="someText" alt="someText">
  </aside>
  <article class="feature-2">
    <h3>In-Store Interactive Tablet</h3>
    <p>Shoppers can use Sellr's Help Me Choose feature to</p>
  </article>
</section>
<section class="inner-wrapper">
  <aside class="aside-image-3">
    <img src="https://s13.postimg.org/9ex6ae9er/feature_3.jpg" title="someText" alt="someText">
  </aside>
  <article class="feature-3">
    <h3>In-Store Interactive Tablet</h3>
    <p>Shoppers can use Sellr's Help Me Choose feature to</p>
  </article>
</section>