gpt4 book ai didi

html - 当我将文本添加到水平滚动条时,它会将其父 div 向下推

转载 作者:行者123 更新时间:2023-11-28 15:23:40 24 4
gpt4 key购买 nike

我想弄清楚为什么当我将文本插入水平滚动 div 中的一个 div 时,它会导致文本的父 div 向下推。有什么想法吗?

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}

a {
color:white;
text-decoration:none;
font-family:'Hind';
}

#bold_avenir {
font-family:'Hind';
font-weight:bold;
}

#head_link{
text-transform:uppercase;
}

body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}

.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}

.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}

.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}

#project_1{
border:red 4px solid;
}

#project_1 p{
display:block;
border:red 4px solid;
}

#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><a href="" id="head_link"><span id="bold_avenir">Paul Taylor</span> Creative Design</a>
</nav>

<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>

<footer>
<a href=""><span id="bold_avenir" >Resume:</span> LinkedIn </a>
<a href=""><span id="bold_avenir">Contact:</span> paultaylorcreates@gmail.com</a>
</footer>
</body>
</html>

最佳答案

.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}

.pjct-skinny div {
position: absolute;
}

Demo

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}

a {
color:white;
text-decoration:none;
font-family:'Hind';
}

#bold_avenir {
font-family:'Hind';
font-weight:bold;
}

#head_link{
text-transform:uppercase;
}

body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}

.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}

.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}

.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}

.pjct-skinny div {
position: absolute;
}

#project_1{
border:red 4px solid;
}

#project_1 p{
display:block;
border:red 4px solid;
}

#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><a href="" id="head_link"><span id="bold_avenir">Paul Taylor</span> Creative Design</a>
</nav>

<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>

<footer>
<a href=""><span id="bold_avenir" >Resume:</span> LinkedIn </a>
<a href=""><span id="bold_avenir">Contact:</span> paultaylorcreates@gmail.com</a>
</footer>
</body>
</html>

关于html - 当我将文本添加到水平滚动条时,它会将其父 div 向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45642955/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com