2017-08-23 6 views
0

イメージがDIV1に含まれ、テキストがDIV2に含まれているとします。 Div1とDiv2の両方が浮動小数点ですLeft.Soパディングされた画像を非表示にしたいと思います。 DIV2の内容は動的なので、どのdivでも高さを設定したくありません。 偶数ボックスサイズ:このコードまたはブラウザでは、パディングボックスは機能しませんでした。 enter image description here モニタースタンドトリミングにより、画像の下などのように私の欲望出力: enter image description here画像のメインコンテナdivをパディング/マージンすることなく、divのパディング/マージン画像の部分を隠す方法はありますか?

.monitor-area 
 
{ 
 
\t background:#ebebeb; 
 
\t height:auto; 
 
} 
 
.monitor-area:after 
 
{ 
 
\t content:''; 
 
\t display:block; 
 
\t clear:both; 
 
} 
 

 
.monitor 
 
{ 
 
\t width:50%; 
 
\t float:left; 
 
\t overflow:hidden; 
 
} 
 
.monitor img 
 
{ 
 
\t width:100%; 
 
} 
 
.monitor-content 
 
{ 
 
\t width:44%; 
 
\t overflow:hidden; 
 
\t float:right; 
 
\t padding-right:2%; 
 
} 
 
.monitor-title 
 
{ 
 
\t margin-top:80px; 
 
} 
 

 
.monitor-title h1 
 
{ 
 
\t color:#333333; 
 
\t font-size:30px; 
 
\t font-weight:normal; 
 
\t text-transform:uppercase; 
 
} 
 
.monitor-text 
 
{ 
 
}
<section class="monitor-area"> 
 
\t <div class="monitor"> 
 
\t <img src="https://image.ibb.co/ioQ47Q/monitor.png" alt="448*250px" /> 
 
\t </div> 
 
\t <div class="monitor-content"> 
 
\t \t <div class="monitor-title"> 
 
\t \t <h1>A CATCHY TITLE</h1></div> 
 
\t \t 
 
\t \t <div class="monitor-text"> 
 
\t \t <p>Cursuspenatisaccum ut curabitur nulla tellus tor 
 
\t \t ames a in curabitur pede. Idet mollisi eros dis orci 
 
\t \t congue elis et curabitur consequam intesque. 
 
\t \t Curabiturpisametur in ante.</p> 
 
\t \t </div> 
 
\t \t <div class="monitor-button"> 
 
\t \t <a href="">read more 
 
\t \t <i class="fa fa-angle-double-right"></i> 
 
\t \t </a> 
 
\t \t </div> 
 
\t </div> 
 
</section>

+0

は何を理解するために、簡単な言葉で、そのハードを教えてくださいちょうどあなたがほしい – Muhammad

+0

ちょうど2つの画像を参照してください。私は最後の画像のような出力は、モニターの下部を隠すことによって期待しています。 –

答えて

1

.monitor-area 
 
{ 
 
\t background:#ebebeb; 
 
\t height:auto; 
 
} 
 
.monitor-area:after 
 
{ 
 
\t content:''; 
 
\t display:block; 
 
\t clear:both; 
 
} 
 

 
.monitor 
 
{ 
 
\t width:50%; 
 
\t float:left; 
 
\t overflow:hidden; 
 
max-height:205px 
 
} 
 
.monitor img 
 
{ 
 
\t width:100%; 
 
} 
 
.monitor-content 
 
{ 
 
\t width:44%; 
 
\t overflow:hidden; 
 
\t float:right; 
 
\t padding-right:2%; 
 
} 
 
.monitor-title 
 
{ 
 
\t margin-top:80px; 
 
} 
 

 
.monitor-title h1 
 
{ 
 
\t color:#333333; 
 
\t font-size:30px; 
 
\t font-weight:normal; 
 
\t text-transform:uppercase; 
 
} 
 
.monitor-text 
 
{ 
 
}
<section class="monitor-area"> 
 
\t <div class="monitor"> 
 
\t <img src="https://image.ibb.co/ioQ47Q/monitor.png" alt="448*250px" /> 
 
\t </div> 
 
\t <div class="monitor-content"> 
 
\t \t <div class="monitor-title"> 
 
\t \t <h1>A CATCHY TITLE</h1></div> 
 
\t \t 
 
\t \t <div class="monitor-text"> 
 
\t \t <p>Cursuspenatisaccum ut curabitur nulla tellus tor 
 
\t \t ames a in curabitur pede. Idet mollisi eros dis orci 
 
\t \t congue elis et curabitur consequam intesque. 
 
\t \t Curabiturpisametur in ante.</p> 
 
\t \t </div> 
 
\t \t <div class="monitor-button"> 
 
\t \t <a href="">read more 
 
\t \t <i class="fa fa-angle-double-right"></i> 
 
\t \t </a> 
 
\t \t </div> 
 
\t </div> 
 
</section>

関連する問題