내 div의 특히 .mid-content 중 하나에 문제가 있습니다 . 그것은 내 외부 div .main-content 의 전체 높이를 차지 하지만 다른 두 개의 내부 div .posts 및 .sidebars 아래에 있기를 원합니다 . 대신 .sidebars 의 왼쪽에 있습니다.
.mid-content div를 블록으로 표시하려고 시도했지만 문제가 지속됩니다. 또한 컨테이너 div의 오버플로 설정을 사용해 보았습니다. 이로 인해 헤더의 테두리가 제거됩니다.
내 코드는 다음과 같습니다.
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<div class="container">
<div class="header">
<ul class="navigation-bar">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="main-content">
<div class="posts top-buffer">
<div class="post">
<h1>A Post About Something</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
</p>
</div>
</div>
<div class="sidebars top-buffer">
<div class="sidebar">
<h1>Sidebar One</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
</p>
</div>
</div>
<div class="mid-content">
<h1>
This Should be below everything
</h1>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
font-family: futura;
}
body {
background-color: #f2f2f2;
}
.container {
width: 80%;
margin: 0 auto;
}
.header {
width: 100%;
height: 80px;
background-color: #777777;
border: 3px solid black;
border-radius: 5px;
}
.navigation-bar {
height: 80px;
width: 80%;
}
.navigation-bar > ul {
margin: 0 auto;
}
.navigation-bar > li {
width: 20%;
list-style: none;
float: left;
}
.navigation-bar > li > a {
display: block;
color: white;
line-height: 80px;
text-align: center;
text-decoration: none;
}
.navigation-bar a:hover, .navigation-bar a:active, .active {
background-color: #ff8989;
}
.main-content {
overflow: hidden;
}
.top-buffer {
margin-top: 2%;
}
.posts {
width: 55%;
float: left;
border: 3px solid black;
padding: 2% 4%;
margin-top: 2%;
margin-bottom: 4%;
border-radius: 5px;
background-color: #ffc893;
}
.sidebars {
width: 26%;
float: right;
border: 3px solid black;
border-radius: 5px;
padding: 2% 3%;
background-color: #b5ffb2;
}
.mid-content {
width: 100%;
display: block;
}
.mid-content 클래스에 clear : both 스타일을 추가합니다.
.mid-content {
width: 100%;
display: inline-block;
clear: both;
}
그러면 위의 두 열 아래에 div가 강제로 적용됩니다.
또한 디스플레이를 블록에서 인라인 블록으로 변경하고 여백과 패딩을 div에 적용 할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다