1. 首頁
  2. 問答
  3. 如何在HTML/CSS中完成此佈局？

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

2016-12-05 91 views
0

爲什麼浮動元件沒有正確安排？我的圖片有一些空白區域，我不知道它來自哪裏。如何在HTML/CSS中完成此佈局？

所需的外觀：

enter image description here

代碼：

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

來源

2016-12-05 thedivkiller

+1

有時直列IMG公司將不得不在它們下面的小空白。通過使它們成爲'display：block'來刪除它。 – mch

回答

5

入住此...

使圖像的寬度100％和T EXT-居中

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

來源

2016-12-05 09:13:51 Sankar

+1

感謝bro @jafarbtech – Sankar

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>

來源

2016-12-05 09:14:01

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

來源

2016-12-05 09:15:06

相關問題

 相關問題