边距/填充未正确应用

时间：2016-10-07 06:17:07

标签： html css

这是我的HTML＆amp; CSS代码。这是我遇到的问题的图像：screenshot。

我不知道为什么顶部填充有10px - 它应该是20px。

我试图调整边距和＆amp;填充各种元素但似乎没有调整问题。有人知道造成这种情况的原因以及如何解决这个问题吗？

@import 'https://fonts.googleapis.com/css?family=Roboto:300,900'; /* font-family: 'Roboto', sans-serif; */

html, body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: #ffffff; }

img { width: 100%; display: block; }

.block { color: #fff; font-size: 18px; background: #444444; text-align: center; padding: 10px 0px; } /* padding inside col */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.wrap { width: 75%; margin: 0 auto; background: transparent; padding: 10px;} /* padding surrounding grid */

.grid { width: 100%; }

.grid:after { clear: both; content: ""; display: table; }

.row { padding: 0px 0; background: transparent; }

.col-1-4 { width: 25%; }
.col-1-2 { width: 50%; }
.col-3-4 { width: 75%; }
.col-1-1 { width: 100%; }

.col-1-5 { width: 20%; }

[class*='col'] { float: left; padding: 10px; } /* padding between cols & rows */

.gallery-grid { margin: 0; padding: 0; list-style: none; position: relative; width: 100%; }
.gallery-grid li { position: relative; float: left; overflow: hidden; width: 16.6666667%; width: -webkit-calc(100% / 6); width: calc(100% / 6); }

@media (max-width: 768px) { [class*='grid'] { width: 100%; } [class*='col'] { width: 100%; padding: 10px 20px;} }
@media (max-width: 768px) { .gallery-grid li { width: 33.3333333%; width: -webkit-calc(100% / 3); width: calc(100% / 3); } }
<!DOCTYPE html>

<html lang="en-US">
 
<head>

    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles/siimple.css">
	
</head>

<body>

	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
			</div>
		</div>
	</div>
	<div class="row">
		<ul class="gallery-grid">
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
		</ul>
	</div>
	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-1"><div class="block">1-1</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
			</div>
		</div>
	</div>
	
</body>

</html>

4 个答案:

答案 0 :(得分：0)

你只需要更新这个

.col-1-1 { width: 100%; padding-top: 20px !important; }

在你的代码中，cols周围有一个10px的填充，所以在2个cols之间总共有一个20px的填充。

或将.col-1-1的规则设置为col *规则下方。然后它没有！重要。

答案 1 :(得分：0)

尝试添加clear：每行后都有样式

@import 'https://fonts.googleapis.com/css?family=Roboto:300,900'; /* font-family: 'Roboto', sans-serif; */

html, body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: #ffffff; }

img { width: 100%; display: block; }

.block { color: #fff; font-size: 18px; background: #444444; text-align: center; padding: 10px 0px; } /* padding inside col */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.wrap { width: 75%; margin: 0 auto; background: transparent; padding: 10px;} /* padding surrounding grid */

.grid { width: 100%; }

.grid:after { clear: both; content: ""; display: table; }

.row { padding: 0px 0; background: transparent; }

.col-1-4 { width: 25%; }
.col-1-2 { width: 50%; }
.col-3-4 { width: 75%; }
.col-1-1 { width: 100%; }

.col-1-5 { width: 20%; }

[class*='col'] { float: left; padding: 10px; } /* padding between cols & rows */

.gallery-grid { margin: 0; padding: 0; list-style: none; position: relative; width: 100%; }
.gallery-grid li { position: relative; float: left; overflow: hidden; width: 16.6666667%; width: -webkit-calc(100% / 6); width: calc(100% / 6); }

@media (max-width: 768px) { [class*='grid'] { width: 100%; } [class*='col'] { width: 100%; padding: 10px 20px;} }
@media (max-width: 768px) { .gallery-grid li { width: 33.3333333%; width: -webkit-calc(100% / 3); width: calc(100% / 3); } }
<!DOCTYPE html>

<html lang="en-US">
 
<head>

    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles/siimple.css">
	
</head>

<body>

	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
			</div>
		</div>
	</div>
	<div class="row">
		<ul class="gallery-grid">
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
		</ul>
	</div>
  <div style="clear:both;"></div>
	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-1"><div class="block">1-1</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
			</div>
		</div>
	</div>
	
</body>

</html>

答案 2 :(得分：0)

在CSS中，在倒数第二行，媒体查询说填充应该是：

padding: 10px 20px;

阅读：＆＃34; Padding top-bottom = 10px，而left-right = 20px＆＃34;

如果您想在顶部放置20px，请将其替换为以下内容。

padding: 20px 10px 20px 20px;

您还应该在最后一行的第7行更新代码：

[class*='col'] { float: left; padding: 10px; }

/* It should be the following - modify at will */
[class*='col'] { float: left; padding: 20px 10px 10px 10px; }

建议你的CSS职业生涯

将来，如果这样的事情再次发生，浏览器的devtools可能是调试CSS问题的天赐之物。在chrome（以及Firefox和我认为的IE）中，您可以右键单击并选择“检查”。如果您想了解更多信息，请查阅有关如何使用浏览器的开发工具的教程。

答案 3 :(得分：0)

这是因为，在你的css中，gallery-grid元素大于包含它的元素，即“row”。所以它在容器外流动。

为了解决这个问题，有一个明确的修复方法： -

只需在所有行中添加.clearfix类，并将其定义为：

.clearfix {
  overflow: auto;
}

这将解决问题。

相关问题
最新问题