在進入移動視圖時延伸到父div外部的子元素

Question

我對此處發生的事情絕對難以理解。我嘗試了每個修復程序，我可以找到這個網站，似乎沒有任何幫助。

我試圖使我的網站視圖更好使用手機時。使用我的父div時，當屏幕小於預設寬度時，它會從px寬度變爲％寬度，並且在進入移動視圖時，子元素會從浮動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/