0
私は何か問題を抱えているデザインに取り組んできました。 This is how it should lookテキストの隣に画像を浮かべて小さな画面に積み重ねる方法
私のコードはこのデザインと非常によく似ていますが、正しくフィットするようにはできません。
私は現在、画面サイズが小さくなるにつれて画像を縮小してテキストのセクションの下に積み重ねるメディアクエリを設定しました。しかし、ウィンドウのサイズが小さくなっている間、テキストの下に画像をドロップし、大きな空白を残します。
さらに、フル解像度では、画像とテキストの間にギャップがありますが、私はそれらをお互いに座っているように見えません。このデザインをより簡単に実現できることはありますか？
.redText{
\t background-color: #f0f0f0;
\t max-width: 400px;
\t display: block;
\t float: left;
\t padding-left: 10%;
}
\t .redText h1{
\t \t font-size: 40px;
\t \t color: #424242;
\t \t padding: 45px 20px 40px 20px;
\t }
\t .redText h2{
\t \t color: #d0112b;
\t \t padding: 0px 20px 40px 20px;
\t \t margin-top: -66px;
\t \t border-bottom: 10px solid #d0112b;
\t }
\t .redText p{
\t \t font-size: 18px;
\t \t line-height: 24px;
\t \t color: #424242;
\t \t padding: 0px 20px 110px 20px;
\t }
.redMore a{
\t text-decoration: none;
}
.blueText{
\t background-color: #f0f0f0;
\t max-width: 400px;
\t display: block;
\t float: right;
\t padding-right: 10%
}
\t .blueText h1{
\t \t font-size: 40px;
\t \t color: #424242;
\t \t padding: 45px 20px 40px 20px;
\t }
\t .blueText h2{
\t \t color: #0a5587;
\t \t padding: 0px 20px 40px 20px;
\t \t margin-top: -66px;
\t \t border-bottom: 10px solid #0a5587;
\t }
\t .blueText p{
\t \t font-size: 18px;
\t \t line-height: 24px;
\t \t color: #424242;
\t \t padding: 0px 20px 110px 20px;
\t }
.blueMore a{
\t text-decoration: none;
}
.space{
\t float: right;
}
.wrapper{
\t overflow: hidden;
}
.redImg img{
\t float: right;
\t max-width: 100%;
}
.blueImg img{
\t float: left;
\t max-width: 100%;
}
@media screen and (max-width: 480px) {
\t .redImg img{
\t \t float: none;
\t \t margin-left: 0;
\t \t width: auto;
\t }
\t .blueImg img{
\t \t float: none;
\t \t margin-right: 0;
\t \t width: auto;
\t }
}<div class="wrapper">
<div class="redText">
\t <h1>RETAIL</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="redMore">
<a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
</div>
</div>
<div class="redImg"><img src="images/work/retail.jpg"></div>
</div>
<div class="wrapper">
<div class="blueText">
\t <h1>INDUSTRIAL</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="blueMore">
<a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
</div>
</div>
<div class="blueImg"><img src="images/work/industrial.jpg"></div>
</div>
<div class="wrapper">
<div class="redText">
\t <h1>COMMERCIAL</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="redMore">
<a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
</div>
</div>
<div class="redImg"><img src="images/work/commercial.jpg"></div>
</div>
<div class="wrapper">
<div class="blueText">
\t <h1>HOTELS</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="blueMore">
<a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
</div>
</div>
<div class="blueImg"><img src="images/work/hotels.jpg"></div>
</div>
最初のアプローチは、私のような画像ブロックやテキストブロックを相殺することはできません。この例では...または私はそれを正しく理解していないのですか？私はテキストと画像の両方に50％の最大幅を入れて、両方をインラインブロックとして表示していますか？ –
ブートストラップオプションを試しましたか？ –
私はあまりブートストラップに慣れていません。 –