html - 进入移动 View 时扩展到父 div 之外的子元素

Question

我完全不知道这里发生了什么。我尝试了在此站点上可以找到的所有修复程序，但似乎没有任何帮助。

我正在努力使我的网站在使用移动设备时具有更好的 View 。对于我的父 div，当屏幕小于预设宽度时，它从 px 宽度变为 % 宽度，当进入移动 View 时，子元素从 float px 宽度元素变为 100% block 元素。

但是，无论我尝试什么，当子元素切换到 100% 时，它们会占据浏览器的 100% 而不是父元素...这使得它们溢出父元素的右侧。

我完全不知道该怎么做。

.wrapper {
	width: 1100px;
	margin: 0 auto;
}
.main-table {
	width: 100%;
	background-color: #FFF;
	border: 1px solid #d1d1d1;
	margin-top: 3em;
	color: #4a4949;
	font-family: Arial, sans-serif;
	font-size: 0.7em;
}
.main-table h2 {
	background-color: #080709;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1em;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	line-height: 4em;
	margin: 2.5em;
	text-align: center;
}
.main-table .table-content {
	float: left;
	margin: 0 2.5em 2.5em;
	text-align: justify;
	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) {
	.wrapper {
		width: 100%;
	}
	.main-table .table-content {
		float: none !important;
		width: 100% !important;
		margin: 0 2.5em 2.5em !important;
	}
}

<div class="wrapper">
  <div class="main-table clearfix">
	  <h2>Main Title</h2>
	  <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. 
	  </div><div class="table-content" style="width: 380px; margin-left: 0">
		  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% 并添加边距...并添加 box-sizing:border-box:

.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/