CSS文本元素破坏div定位
CSS文本元素破坏div定位
提问于 2018-01-12 14:10:03
我正在处理网页，并在添加文本之前将其分成几个div。
但是当我在其中一个div中放入一些文本时，所有div的位置都会折叠。
我已经编写了简单的代码来显示问题。
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}<!DOCTYPE html>
<html>
<head>
<title>Issue</title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
正如你所看到的，它划分得很好，没有问题(至少在我看来是这样)。
但是一旦你在div中添加了文本，它就会崩溃，我不明白为什么。
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
p{
color: white;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
无论p标签是否存在，它都会折叠。
Div用%unit定位，并且是相对的。
因此，在我看来，它应该只与它的父母和兄弟相关。
我应该重新分配所有的绝对位置吗？
如果你知道为什么，或者有解决方案，请教我。谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-01-12 14:55:25
默认情况下，将vertical-align: top;放到.box中，它有vertical-align: baseline;
.box {
display: inline-block;
vertical-align: top;
position: relative;
background: black;
}Stack Overflow用户
发布于 2018-01-12 15:07:36
Ismail Farooq答案之外的另一种选择
.box {
display: block;
position: relative;
background: black;
float: left;
}Stack Overflow用户
发布于 2018-01-12 15:29:41
我正在使用flexbox链接是Flexbox here
<html>
<style>
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
display: flex;
background: black;
margin: 0.5%;
}
#box-1{
height: 50%;
width: 49%;
}
#box-2{
height: 50%;
width: 49%;
}
#box-3{
height: 50%;
width: 49%;
}
#box-4{
height: 50%;
width: 49%;
}
p{
color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48220518
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号