这第一张照片是我想要实现的目标
但是,我能做的就是这个
正如你所看到的,最后一个绿色方块位于最后一个浅蓝色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;
答案 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;
}
应适用于以下代码中的段落。
<!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;
答案 1 :(得分:0)
您应该查看CSS Selectors work的方式,因为当您想要为另一个元素中的元素指定选择器时,不以这种方式放置选择器,您只需使用outer_element inner_element
,例如#two .red
。
除此之外,其他几乎是正确的,另一个问题是你正在对所有div
&#39;应该只应用于容器的元素,因此容器的边距也应用于正方形。
@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;