モバイルビューに入ると、親divの外にある子要素

Question

ここで何が起こっているのかはまったく分かりません。私はこのサイトで見つけることができるすべての修正を試みたが、何も助けに見えなかった。

モバイルを使用しているときにサイトビューを改善しようとしています。私の親divでは、画面が予め設定された幅より小さいときにpx幅から％幅に変わるだけでなく、モバイルビューに入るときに浮動小数点幅の要素から100％のブロック要素に変化する子要素も変わります。

しかし、私が試してみても、子要素が100％に切り替わると、親要素ではなくブラウザの100％が占有されます。親要素の右側を流出させます。

私は何をすべきかについて完全に困惑しています。

.wrapper { 
 
\t width: 1100px; 
 
\t margin: 0 auto; 
 
} 
 
.main-table { 
 
\t width: 100%; 
 
\t background-color: #FFF; 
 
\t border: 1px solid #d1d1d1; 
 
\t margin-top: 3em; 
 
\t color: #4a4949; 
 
\t font-family: Arial, sans-serif; 
 
\t font-size: 0.7em; 
 
} 
 
.main-table h2 { 
 
\t background-color: #080709; 
 
\t font-family: 'Josefin Sans', sans-serif; 
 
\t font-size: 1em; 
 
\t color: #FFF; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 0.3em; 
 
\t line-height: 4em; 
 
\t margin: 2.5em; 
 
\t text-align: center; 
 
} 
 
.main-table .table-content { 
 
\t float: left; 
 
\t margin: 0 2.5em 2.5em; 
 
\t text-align: justify; 
 
\t line-height: 1.3em; 
 
} 
 
.clearfix:before, .clearfix:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.clearfix { 
 
    *zoom: 1; 
 
} 
 
@media only screen and (max-width: 1100px) { 
 
\t .wrapper { 
 
\t \t width: 100%; 
 
\t } 
 
\t .main-table .table-content { 
 
\t \t float: none !important; 
 
\t \t width: 100% !important; 
 
\t \t margin: 0 2.5em 2.5em !important; 
 
\t } 
 
}

<div class="wrapper"> 
 
    <div class="main-table clearfix"> 
 
\t <h2>Main Title</h2> 
 
\t <div class="table-content" style="width: 636px"> 
 
     Nunc vitae purus vel dolor lacinia gravida. Vestibulum euismod dictum nulla. Suspendisse suscipit quis est ac tristique. Aenean sodales porta diam ac venenatis. Suspendisse tincidunt at ex ac vestibulum. Donec lacus turpis, condimentum suscipit tempor ut, pulvinar non velit. Vestibulum varius lacus tortor, non aliquam dolor lobortis a. Fusce bibendum, tortor ac faucibus finibus, leo leo consequat sapien, non consectetur sem nisl quis est. Duis non nunc luctus, auctor dui sed, commodo lacus. Curabitur efficitur convallis facilisis. Pellentesque tincidunt magna vel nisl volutpat consectetur. Aenean condimentum, libero in lacinia venenatis, mi purus varius turpis, quis placerat nisl nibh ac odio. Nulla ac augue elit. Integer mi ante, ultrices id finibus ut, volutpat vitae tellus. 
 
\t </div><div class="table-content" style="width: 380px; margin-left: 0"> 
 
\t \t Donec blandit, massa vel venenatis dapibus, metus nulla lacinia ligula, a accumsan metus lectus eu dolor. Ut rutrum in purus ac hendrerit. Aenean luctus urna sit amet erat pharetra, dictum tristique dolor rutrum. Fusce in porta sem. Proin augue quam, faucibus varius nisi in, aliquam scelerisque nibh. Donec blandit tortor et varius efficitur. Nam nec ipsum eget orci congue posuere at quis lectus. Sed vehicula leo eros, ut consequat enim pretium id. Aenean scelerisque at diam a fermentum. Phasellus facilisis sagittis rutrum. Donec malesuada mauris in tellus congue euismod. 
 
    </div> 
 
</div>

https://jsfiddle.net/eame16p2/

Answer 1

パディングとマージンを交換し、マージンが問題を引き起こしたので、あなたは100％に子の幅を設定し、マージンを追加しているので、幅は、100％を超えました...そして箱のサイズ変更を追加：ボーダーボックス：

.main-table .table-content { 
    float: none !important; 
    width: 100% !important; 
    padding: 0 2.5em 2.5em !important; 
margin:0; 
box-sizing:border-box; 

} 

はデモ：https://jsfiddle.net/eame16p2/1/