1
私は水平スクロールdivの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> [email protected]</a>
</footer>
</body>
</html>