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

时间:2017-09-28 00:50:12

标签: html css sass

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

what i am trying to imitate

但是,我能做的就是这个

error

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

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

这是我的HTML和 SCSS代码



@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*/
	}
}

<!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;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

这个问题在这里回答有点乱,因为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;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

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

&#13;
&#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;
&#13;
&#13;