"float: left“不能正常工作
"float: left“不能正常工作
提问于 2016-06-27 21:57:37
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: red;
}
.item {
width: 33.33vw;
height: 33.33vw;
float: left;
}
#featured {
background-color: green;
width: 66.66vw;
}
#vertical {
background-color: blue;
height: 66.66vw;
}
#normal01 {
background-color: pink;
}
#normal02 {
background-color: yellow;
}<div class="container">
<div class="item" id="featured">
</div>
<div class="item" id="vertical">
</div>
<div class="item" id="normal01">
</div>
<div class="item" id="normal02">
</div>
</div>
我目前正在学习HTML/CSS，我似乎在网络上找不到这样一个基本的“模板”。正如你所看到的，我的粉色和黄色方块不想与顶部的绿色矩形发生冲突。我尝试不同的技术已经两个小时了，但没有解决这个问题，有人能告诉我正确的方向吗？
实现我想要做的事情的最好方法是什么，浮动-左甚至是正确的方法吗？
回答 1
Stack Overflow用户
发布于 2016-06-27 22:01:33
要解决这种特殊情况，可以在#vertical中添加float: right。如果它有float: left，那么后面的元素就不允许留下。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: red;
}
.item {
width: 33.33vw;
height: 33.33vw;
float: left;
}
#featured {
background-color: green;
width: 66.66vw;
}
#vertical {
float: right;
background-color: blue;
height: 66.66vw;
}
#normal01 {
background-color: pink;
}
#normal02 {
background-color: yellow;
}
</style>
<div class="container">
<div class="item" id="featured">
</div>
<div class="item" id="vertical">
</div>
<div class="item" id="normal01">
</div>
<div class="item" id="normal02">
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38055897
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号