Question

这第一张照片是我想要实现的目标

但是，我能做的就是这个

正如你所看到的，最后一个绿色方块位于最后一个浅蓝色div之外，而且＃34; Some Text＆＃34;在它的div之外也处于最底层。

我一直在使用clear：both和clear：left但是这就是发生的事情。

这是我的HTML和 SCSS代码

＆＃13;

@import 'reset';

div {
	width: 440px;
 	background: lightblue;
  height: 50px;
 	// overflow: auto;
 	margin: 0 0 50px 0;
}


.red, .green, .blue, .yellow {
	width: 50px;
	height: 50px;
	float: left;
}

.red {
  background: red;
  float: left;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
  float: left;

}

.green {
  background: green;
}

#two {
	.red, .green, .blue {
		float: right;
	}
}

#three {
	.red {
		float: right;
	}
}

#four {
	height: 66px;

	p {
		// border: 1px solid black;
		clear: left;
	}

	.blue {
		float: right;
	}
}

#five {
	height: 100px;

	.blue {
		float: right;
	}

	.green {
		clear: left; /*clear:left*/
	}
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Floats</title>
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<main>
		<p>Float</p>
		<div>
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div id="two">
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div id="three">
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div id="four">
			<div class="red"></div>
			<div class="blue"></div>
			<p>Some Text</p>
		</div>
		<div id="five">
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
	</main>

</body>
</html>

＆＃13;

Answer 1

这个问题在这里回答有点乱，因为SO上的解释器可以理解 css 而不是 scss 。我已经删除了很多scss特定的样式，并将我需要的内容翻译成普通的CSS。你应该能够轻松地转换回scss。

为了让你的容器div展开以保存你的浮动子div，我使用了clear: both。我还删除了高度属性（来自容器），因此高度由内容设置。 clear: left或@import 'reset'; div { width: 440px; background: lightblue; overflow: hidden; margin: 0 0 50px 0; } .red, .green, .blue, .yellow { width: 50px; height: 50px; float: left; margin: 0; } .red { background: red; float: left; } .blue { background: blue; } .yellow { background: yellow; float: left; } .green { background: green; } #four p { clear: both; margin: 0; }应适用于以下代码中的段落。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Floats</title>
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<main>
		<p>Float</p>
		<div>
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div id="two">
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div id="three">
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div id="four">
			<div class="red"></div>
			<div class="blue"></div>
			<p>Some Text</p>
		</div>
		<div id="five">
			<div class="red"></div>
			<div class="blue"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
	</main>

</body>
</html>

＆＃13;

Run-Time error '1004':

Application-defined or object-defined error

＆＃13;

Answer 2

您应该查看CSS Selectors work的方式，因为当您想要为另一个元素中的元素指定选择器时，不以这种方式放置选择器，您只需使用outer_element inner_element，例如#two .red。

除此之外，其他几乎是正确的，另一个问题是你正在对所有div＆＃39;应该只应用于容器的元素，因此容器的边距也应用于正方形。

＆＃13;

@import 'reset';
#one, #two, #three, #four, #five {
  width: 440px;
  background: lightblue;
  height: 50px;
  margin: 0 0 50px 0;
}

.red, .green, .blue, .yellow {
  width: 50px;
  height: 50px;
  float: left;
}

.red {
  background: red;
  float: left;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
  float: left;
}

.green {
  background: green;
}

#two .red, #two .green, #two .blue {
  float: right;
}

#three .red {
  float: right;
}

#four {
  height: 70px;
}

#four p {
  clear: left;
}

#four .blue {
  float: right;
}

#five {
  height: 100px;
}

#five .blue {
  float: right;
}

#five .green {
  clear: left;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Floats</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <main>
    <p>Float</p>
    <div id="one">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="yellow"></div>
      <div class="green"></div>
    </div>
    <div id="two">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="yellow"></div>
      <div class="green"></div>
    </div>
    <div id="three">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="yellow"></div>
      <div class="green"></div>
    </div>
    <div id="four">
      <div class="red"></div>
      <div class="blue"></div>
      <p>Some Text</p>
    </div>
    <div id="five">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="yellow"></div>
      <div class="green"></div>
    </div>
  </main>

</body>

</html>

＆＃13;

清楚：两个都让绿色方块走出div

2 个答案: