Question

我在网页上工作，并在添加文字之前将其分成几个div。

但是当我在其中一个div中放入一些文本时，所有div的位置都会崩溃。

我已经制作了简单的代码来显示问题。

<!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>

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;
}

正如你所看到的那样，它没有问题（至少在我看来）是分开的

但是只要在div中添加文本，它就会崩溃，我看不出原因。

<!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>

Get-ChildItem -Name C:\path\folder | foreach {"different path $_"}

是否存在p标签，它会崩溃。

Div以％单位定位，相对而言。

所以在我的思想中，它应该只与它的父母和兄弟相关。

我应该用绝对位置重新分配所有这些吗？

如果你知道原因，或者有解决方案，请教我。谢谢！

Answer 1

默认情况下，将vertical-align: top;置于.box，vertical-align: baseline;

.box {
    display: inline-block;
    vertical-align: top;
    position: relative;
    background: black;
}

Answer 2

Ismail Farooq的答案旁边的替代

.box {
    display: block;
    position: relative;
    background: black;
    float: left;
}

Answer 3

我正在使用flexbox链接Flexbox here

＆＃13;

<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>

＆＃13;

CSS文本元素破坏div定位

3 个答案: