Question

我正在尝试创建一个响应式Tagcloud。
但不知何故，我在max-width 400px部分遇到了问题。

虽然我已经使用了width：auto和box sizing border-box，但它会在Chrome中生成一个326px的水平滚动条，如下图所示。

有人为此获得了解决方案吗？

＆＃13;

body{
	color:#122e45;
	font-family: Verdana,sans-serif;
	font-size:11px;
	line-height:16px;
	background-color:#fafafa;
	margin:0;
	padding:0;
	min-width:320px;
}

/* Helpers */
.before:before {
   	display: table;
   	content: " ";
}

.after:after {
   	content: " ";
   	display: table;
   	clear: both;
}

#tagCloud {
	max-width:960px;
	margin: 0 auto;
}

#tagCloud .quarter {
	width:25%;
	padding: 10px 5px;
	box-sizing:border-box;
	max-width:240px;
	float:left;
}


#tagCloud ul {
	list-style-type:none;
	margin:0;
	font-size:14px;
	padding:0;
}

#tagCloud ul li {
	height:26px;
}

#tagCloud ul li a {
	text-decoration:none;
	color:#122e45;
}


@media screen and (max-width: 760px) {
	#tagCloud .quarter {
		min-width:33.3333%;
	}
	
	#tagCloud .last {
		clear:left;
		min-width:100%;
	}
	
	#tagCloud .last:before {
	   	display: table;
	   	content: " ";
	}
	
	#tagCloud .last:after {
   		content: " ";
   		display: table;
   		clear: both;
	}
	
	#tagCloud .last li {
		display:block;
		float:left;
		margin-right: 20px;
	}
}

@media screen and (max-width: 580px) {
	#tagCloud .quarter {
		min-width:50%;
	}
	
	#tagCloud .last li {
		display:list-item;
		float:none;
		margin-right: 0px;
		width:100%;
	}
	
	#tagCloud .last {
		clear:none;
	}
	
	#tagCloud .last:before {
	   	content: "";
	}
	
	#tagCloud .last:after {
   		content: "";
	}
}

@media screen and (max-width: 400px) {
	#tagCloud .quarter {
		width: auto;
	    float: none;
	    max-width: initial;
	    min-width: initial;
	    box-sizing:border-box;
	}
	
	#tagCloud .last:before {
	   	content: "";
	}
	
	#tagCloud .last:after {
   		content: "";
	}
}

＆＃13;

	<div id="cmsContainer">
		<div id="tagCloud" class="cmsElement before after">
					<div class="quarter">
						<ul>
							<li><a href="#">IT Jobs</a></li>
							<li><a href="#">Jobs für Ingenieure</a></li>
							<li><a href="#">Fahrzeugbau & Zulieferer</a></li>
							<li><a href="#">Personal</a></li>
							<li><a href="#">Vertrieb</a></li>
							<li><a href="#">Maschinenbau</a></li>
							<li><a href="#">Beratung, Consulting</a></li>
							<li><a href="#">Rechnungswesen</a></li>
							<li><a href="#">Immobilien und Bau</a></li>
						</ul>
					</div>
					<div class="quarter">
						<ul>
							<li><a href="#">Jobs im Marketing</a></li>
							<li><a href="#">Pharma, Chemie</a></li>
							<li><a href="#">Management</a></li>
							<li><a href="#">80.000 EUR Plus</a></li>
							<li><a href="#">Sachbearbeitung</a></li>
							<li><a href="#">Controlling</a></li>
							<li><a href="#">Ärzte und Mediziner</a></li>
							<li><a href="#">Pflege</a></li>
							<li><a href="#">Jobs für SAP-Spezialisten</a></li>
						</ul>
					</div>
					<div class="quarter">
						<ul>
							<li><a href="#">Sekretariat</a></li>
							<li><a href="#">Recht und Steuern</a></li>
							<li><a href="#">Banken, Finanzen</a></li>
							<li><a href="#">Versicherung</a></li>
							<li><a href="#">Energie</a></li>
							<li><a href="#">Jugend- & Sozialarbeit</a></li>
							<li><a href="#">Behörden, Kommunen</a></li>
							<li><a href="#">Verbände, Vereine</a></li>
							<li><a href="#">Schule und Bildung</a></li>
						</ul>
					</div>
					<div class="quarter last">
						<ul>
							<li><a href="#">Auslandsjobs</a></li>
							<li><a href="#">Direkteinstieg</a></li>
							<li><a href="#">Trainee</a></li>
							<li><a href="#">Ausbildung</a></li>
							<li><a href="#">Praktikum</a></li>
							<li><a href="#">Angebote der Woche</a></li>
							<li><a href="#">Jobs nach Einsatzort</a></li>
							<li><a href="#">Jobs nach Thema</a></li>
							<li><a href="#">Jobs nach Unternehmen</a></li>
						</ul>
					</div>
		</div>
	</div>

＆＃13;

Answer 1

请将身体的css更新为 -

body{ color:#122e45; font-family: Verdana,sans-serif; font-size:11px; line-height:16px; background-color:#fafafa; margin:0; padding:0; }

删除应用于它的min-width CSS属性，然后以低分辨率显示滚动条。但是，如果要保留min-width属性，请减小相同值。

Answer 2

你的身体有一个min-width属性，它被继承到你的html的其他元素 - 比如你的cmsContainer。 Pic

因此，您可以从身体中移除该属性：

<强> CSS

body {
  color:#122e45;
  font-family: Verdana,sans-serif;
  font-size:11px;
  line-height:16px;
  background-color:#fafafa;
  margin:0;
  padding:0;
}

或者，您可以为继承它的元素覆盖它。例如：

<强> CSS

body {
  color:#122e45;
  font-family: Verdana,sans-serif;
  font-size:11px;
  line-height:16px;
  background-color:#fafafa;
  margin:0;
  padding:0;
  max-width: 320px;
}

#cmsContainer {
  max-width: none;
}

或者，您也可以简单地减少max-width值。

Answer 3

你只需要从body类中删除min-width:320px;，它就可以了。

它对我来说很好，希望这能解决你的问题。

或者如果要保持身体宽度很重要，那么再添加一个类：

body body{min-width:auto!important;}

主体的最小宽度会导致滚动条问题

3 个答案: