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％を作成し、T EXT-ALIGNセンター

.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>

Answer 2

は、あなたの画像タグにいくつかのプロパティを追加

img{ 
    width:100%; 
    } 

.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; } 
 
img{ 
 
    width:100%; 
 
    }

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

Answer 3

body{ 
margin:0px; 
padding:0px; 
} 

イメージの幅は100％にする必要があります。

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