Q&A
以下htmlで、
overflow:hidden部分をコメントアウトを解除すると、
image-block_left部分の背景が囲っている要素下まできますが、
overflow:hidden部分をコメントアウトをすると、
image-block_left部分の背景が囲っている要素の半分位までになります。
左右にfloatした親要素にoverflow:hiddenを設定すると
要素下までにくるという理解でよいでしょうか。
あと、もう1点
width:1000px部分をコメントアウト解除すると、
ウィンドウを狭くしていくと、カラムオチ?ずれます。
一方、width:1000px部分をコメントアウトをし、
ウィンドウを狭くしていくと、カラムオチしません。ずれません。
こちらはどういった仕組みのためなのでしょうか。
html
1<html> 2<body> 3 <style> 4 body { 5 margin: 0; 6 padding: 0; 7 } 8 /* 要素配置のスタイル */ 9 .image-block { 10 padding: 150px 0; 11 /*overflow: hidden;*/ 12 } 13 .image-block_left { 14 background: #ecf0f1; 15 } 16 .image-block_right { 17 background: #cfe9fa; 18 } 19 .image-block_inner { 20 /*width: 1000px;*/ 21 margin: 0 auto; 22 } 23 .image-block_img { 24 25 } 26 .image-block_left .image-block_img { 27 float: left; 28 } 29 .image-block_right .image-block_img { 30 float: right; 31 } 32 .image-block_text { 33 width: 500px; 34 } 35 .image-block_left .image-block_text { 36 float: right; 37 } 38 .image-block_right .image-block_text { 39 float: left; 40 } 41 .image-block_ttl { 42 color: #3498DB; 43 font-size: 32px; 44 margin-bottom: 20px; 45 } 46 .image-block_description { 47 line-height: 1.8; 48 } 49 </style> 50 <div class="image-block image-block_left"> 51 <div class="image-block_inner"> 52 <div class="image-block_img"> 53 <img src="./img01.jpg" width="450" alt="" class="animation-scrollUp" /> 54 </div> 55 <div class="image-block_text"> 56 <p class="image-block_ttl animation-scrollUp">キャッチコピー的なテキスト</p> 57 <p class="image-block_description animation-scrollUp">キャッチコピーに対する説明文が入ります。キャッチコピーに対する説明文が入ります。キャッチコピーに対する説明文が入ります。<br /> 58 キャッチコピーに対する説明文が入ります。キャッチコピーに対する説明文が入ります。</p> 59 </div> 60 </div> 61 </div> 62</body> 63</html> 64
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
退会済みユーザー
2017/08/07 03:22