Question

我正在尝试整理一个网页，并发现当我向窗口小部件框添加内容时，我会不断出现白色间距。

当我在widgetOne类中添加H2时，我发现它然后按下接下来的两个小部件并出现一个空格。

我已将代码放在codepen上，以便更容易查看： http://codepen.io/s_bruno1/pen/WRgVVm

        <div class="widget widgetOne">
            <h2>Test Heading</h2>
            <a href="">Find out more</a>
            <button>Test</button>
        </div>

如果有人也能建议如何最好地编码百分比，我们将不胜感激。我自己尝试过，但不觉得这可能是最好的方法。

Answer 1

您的问题是未设置垂直对齐。这是让它工作的代码

.widget {
    min-height: 400px;
    display: inline-block;
    margin-bottom: 15px;
    vertical-align: top;
}

Answer 2

你的百分比很好。尝试浮动小部件

.widgetOne, .widgetTwo, .widgetThree {
    float: left;
{

Answer 3

根据codepen中的CSS，您的小部件有display:inline-block。发生了什么事情是你的小部件试图根据字体规则调整它们的垂直对齐，这会影响垂直对齐，字体大小，行高等等（因为这就是基于内联的元素的工作原理）。尝试将vertical-align: top;添加到.widget。这将正确对齐所有小部件。

html, body, div, p, ul, li, ol, img, span, a {
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
}

li {
	display: inline;
	list-style-type: none;
	background-color: red;
	padding: 0;
	margin: 0;
}

.topNavLeft li {
	float: left;
}

.topNavRight li {
	float: right;
}

.subHeading li {
	float: right;
}

.mainHeader {
	padding: 30px;
	background-color: #66d6ea;
	color: white;
}

.mainHeader h1 {
	font-size: 70px;
}

.mainHeader p {
	font-size: 35px;
}

.inner {
	width: 1290px;
	margin: 0 auto;
}

.widgets {
	width: 102%;
}

.widget {
	min-height: 400px;
	display: inline-block;
	margin-bottom: 15px;
  vertical-align: top;
}

.widgetOne {
	width: 32%;
	background-color: blue;
}

.widgetTwo {
	width: 32%;
	background-color: green;
	margin-right: 1%;
	margin-left: 1%;
}

.widgetThree {
	width: 32%;
	background-color: orange;
}

.widgetFour {
	width: 48.35%;
	background-color: pink;
	margin-right: 1%;
}

.widgetFive {
	width: 48.35%;
	background-color: silver;
}

.widgetSix {
	width: 59%;
	background-color: gold;
	margin-right: 1%;
}

.widgetSeven {
	width: 37.7%;
	background-color: purple;
}

<html>
<head>
	<title>Water Choice</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700" rel="stylesheet">
</head>
<body>

	<ul class="topNavLeft">
		<li>Home</li>
		<li>Business</li>
		<li>Our Company</li>
		<li>News & Media</li>
		<li>Careers</li>
	</ul>

	<ul class="topNavRight">
		<li>Log In</li>
		<li>Register</li>
	</ul>
	<br>
	<br>
	<br>
	<div class="inner">

		<ul class="subHeading">
			<li>IMAGE PLACER</li>
			<li>Your account</li>
			<li>Our services</li>
			<li>Your water</li>
			<li>Get help</li>
			<li>Search Icon</li>
		</ul>
		<br>

		<div class="mainHeader">
			<h1>Moving or adding premises</h1>
			<p>Ecerepro ipidebisci de volesequi officimet ilicitibusam sum <br> sam dita qui consedi sinitiincto consequi nate Ceperspi <br> cturio in nossitiatur, ommodis dolorrorit faciistis.</p>
		</div>
		<div class="widgets">
			<div class="widget widgetOne">
                <h2>Test Heading</h2>
                <a href="">Find out more</a>
                <button>Test</button>
			</div><div class="widget widgetTwo">
				<p>Widget Two Placeholder</p>
			</div><div class="widget widgetThree">
				<p>Widget Three Placeholder</p>
			</div><div class="widget widgetFour">
				<p>Widget Four Placeholder</p>
			</div><div class="widget widgetFive">
				<p>Widget Five Placeholder</p>
			</div><div class="widget widgetSix">
				<p>Widget Six Placeholder</p>
			</div><div class="widget widgetSeven">
				<p>Widget Seven Placeholder</p>
			</div>
		</div>
	</div> <!--inner end-->

</body>
</html>

向窗口小部件添加内容时出现HTML + CSS间距问题

3 个答案: