CSSの最後の記述の.clearfix:before, .clearfix:after {content:""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }の部分ですが、わからない部分が二つありあます。
一つは、content:"";の部分でcontentが何故空なのかという部分です。
二つ目は、なぜbefore,afterを使ったのかという部分です。
直接書き込んでもよかったのではないかと考えております。
ご回答宜しく意お願い致します。
HTML
コード<!DOCTYPE html>
</div><!-- メイン --> <!-- サイド --> <div class="side mobile-collapse"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/side--> </div><!-- Two-colums --> </div></div><!-- body-content --> <!-- footer --> <div class="footer"><div class="section-inner"> <p>Footer text placed here.</p> </div></div><!--/footer--> </body> </html> ```<!-- info-box --> <div class="info-box-a"> <h4>Important Content</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div><!--/info-box--> <!-- info-box --> <div class="info-box-b hide-mobile"> <h4>Not Vital</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div><!--/info-box--> <!-- info-box --> <div class="info-box-b hide-mobile"> <h4>Not Vital</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div><!--/info-box-->
CSS
1コードh1, h2, h3, h4, h5, h6, p { 2 margin: 0; 3 padding: 0; 4} 5 6p { 7 margin: 0 0 1em 0; 8 font-size: 93%; 9 line-height: 1.5em; 10} 11 12body { 13 font-family: Arial, Helvetica, sans-serif; 14 padding: 0; 15 margin:0; 16 background-color: #3f3f3f; 17} 18 19img { 20 max-width: 100%; 21 height: auto; 22 margin: 0 0 10px 0 ; 23} 24 25div.section-inner { 26 max-width: 1100px; 27 padding: 0 25px; 28 margin: 0 auto; 29} 30 31div.header { 32 background-color: #E9e9e9; 33} 34 35div.nav { 36 background-color: #d4d4d4; 37} 38 39div.nav ul { 40margin: 0; 41padding: 0; 42} 43 44div.nav ul li { 45 list-style: none; 46 float: left; 47 font-size: 93%; 48} 49 50div.nav ul li a:link, 51div.nav ul li a:visited { 52 display: block; 53 padding: 10px 15px; 54 text-decoration: none; 55 color: #000; 56} 57 58div.body-content { 59 padding: 50px 0; 60 background: #FFF; 61} 62 63div.thirds{ 64 padding-bottom: 50px; 65} 66 67div.one-third { 68 width: 30%; 69 float: left; 70 margin-right: 5%; 71} 72 73div.one-third-last { 74 margin: 0; 75} 76 77div.main { 78 width: 60%; 79 float: left; 80 margin-right: 5%; 81} 82 83div.side { 84 width: 30%; 85 float: left; 86} 87 88div.info-box-a { 89 background-color: #9bdaef; 90 padding: 20px; 91 font-size: 13px; 92 margin: 0 0 15px 0; 93} 94 95div.info-box-b { 96 background-color: #efdb7f; 97 padding: 20px; 98 font-size: 13px; 99 margin: 0 0 15px 0; 100} 101 102 div.footer { 103 background-color: #3f3f3f; 104 color: #FFF; 105 padding: 15px 0; 106 text-align: center; 107 } 108 109 .clearfix:before, .clearfix:after {content:""; display: table; } 110.clearfix:after { clear: both; } 111.clearfix { *zoom: 1; } 112 113 */ 114
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/05 03:38