Question

我对这里发生的事情感到非常难过。我尝试了在这个网站上找到的每一个解决方案，似乎没有任何帮助。

我尝试在使用移动设备时更好地浏览网站。使用我的父div时，当屏幕小于预设宽度时，它会从px宽度更改为％宽度，以及子元素在进入移动视图时从浮动px宽度元素更改为100％块元素。

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

我绝对不知道该做什么。

＆＃13;

.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;
	}
}

＆＃13;

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

＆＃13;

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/

进入移动视图时，子元素在父div之外延伸

1 个答案: