0
사람들이 이와 같은 질문을 한 장소를 찾았지만 그 장소의 답변이 도움이되지 않았습니다. 호프 나는 내 자신의 질문을 물어 더 많은 행운을 빕니다.두 div 요소가 나란히 놓여있는 문제
내가 일하는 회사의 기본/프로토 타입 웹 사이트를 디자인하려고합니다. 서비스 페이지에서 콘텐츠가 오른쪽에있는 동안 왼쪽에있는 다른 서비스에 대한 사이드 바 탐색 메뉴가 필요했습니다. 페이지에 내용을 추가하기 시작하고 두 번째 줄로 감싸는 단락을 시작하기 전까지는 잘 작동했습니다. 그런 일이 발생하면 콘텐츠 div가 사이드 바 탐색 아래에 떨어졌습니다. 다른 질문에서 누군가와 같이 인라인 블록으로 표시하려고 시도했지만 작동하지 않았습니다. 응답 성있는 콘텐츠로 연습하기 위해 노력하고 있으므로 절대 폭을 줄 필요가 없으며 서로 옆에 머무르게 할 수 있습니다. 아무도 내가 이것을 알아낼 수 있도록 도와 줄 수 있습니까?
작동 예제보기 https://jsfiddle.net/joshuahuff/qcckdqju/1/ * 콘텐츠 배경이 노란색으로 설정되어있어이 문제를 파악하는 동안 볼 수 있습니다. 문제가 해결되면 배경이 제거됩니다.
내 HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tab Title</title>
<meta name="description" content="Description of Site">
<meta name="author" content="Name of Author">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
<header>
<h1><a href="index.html">Atlas Land Office</a></h1>
<nav class="MainNavbar">
<div class="MainNavbarDropdown">
<ul>
<li><a href="index.html">Home</a></li>
<li class="selected"><a href="services.html">Services</a></li>
<li><a href="projects.html">Highlight Projects</a></li>
<li><a href="news.html">News</a></li>
<li id="contact-us" class="contact-us contact-us-selected"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<div class="PageContent">
<div class="PageContentNav">
<ul>
<li><a href="alta.html">ALTA/ACSM Land Title Survey</a></li>
<li><a href="as-built.html">As-Built Survey</a></li>
<li><a href="boundary.html">Boundary Survey</a></li>
<li><a href="construction.html">Construction Staking</a></li>
<li><a href="elevation.html">Elevation Certificate</a></li>
<li><a href="access.html">Legal Access Certificate</a></li>
<li><a href="split.html">Lot Split Survey</a></li>
<li><a href="mir.html">Mortgage Inspection Report</a></li>
<li><a href="topo.html">Topographic Survey</a></li>
</ul>
</div>
<div class="Content">
<h2>Overview</h2>
<p class="PageContentP"><i>Atlas Land Office</i> is a full-service land surveying company which strives to provide nothing but top-notch service to our clients, both in-field <em>and</em> in-office. We do everything from ALTA/ACSM Land Title Surveys to Mortgage Inspection
Reports.</p>
<br />
<p><b>Our services include:</b>
<ul>
<li>ALTA/ACSM Land Title Survey</li>
<li>As-Built Survey</li>
<li>Boundary Survey</li>
<li>Construction Staking</li>
<li>Elevation Certificate</li>
<li>Legal Access Certificate</li>
<li>Lot Split Survey</li>
<li>Mortgage Inspection Report</li>
<li>Topographic Survey</li>
</ul>
</p>
</div>
</div>
</body>
</html>
내 CSS :
/* General */
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Oswald:700|PT+Sans');
body {
padding: 0;
margin: 0;
font-size: 62.5%;
}
/* Smartphones */
@media screen and (max-width:320px) {
/* put your css here */
}
/* Tablets */
@media screen and (min-width:321px) {
/* put your css here */
}
/* Desktops */
@media screen and (min-width:800px) {
/* Main Navigation */
/* Styling the header */
header {
height: 60px;
width: 100%;
padding: 0;
margin: 0;
background: /*#ecf0f1*/
#222;
color: #E54D0B;
}
/* Styling the header h1 */
header h1 {
padding-left: 10%;
line-height: 60px;
font-size: 3em;
}
header h1 a {
text-decoration: none;
color: #E54D0B;
}
/* Applying same CSS to header h1 */
header h1 {
margin: 0;
font-family: Oswald, "Arial Black", Gadget, sans-serif;
}
/* Styling the nav container */
.MainNavbar {
height: 30px;
margin: 0;
line-height: 30px;
font-size: 1.4em;
box-shadow: 5px 0 3px #333;
}
.MainNavbar .MainNavbarDropdown {
background: #E54D0B;
}
.MainNavbar ul {
padding-left: 10%;
margin: 0;
list-style: none;
font-family: "PT Sans", sans-serif;
}
.MainNavbar ul li {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
}
.MainNavbar ul li a {
padding: 0 30px;
display: block;
text-decoration: none;
color: #000;
}
.PageContentNav ul li a {
padding: 0 15px;
display: block;
text-decoration: none;
color: #000;
}
.MainNavbar ul li:hover a {
height: 30px;
background: #F56527;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
transition: all 0.1s linear;
}
.selected {
height: 30px;
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
}
.contact-us {
background: #222;
}
#contact-us a {
color: #FF7133;
}
.MainNavbar ul li.contact-us:hover a {
height: 30px;
background: #222;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #FF7133;
transition: all 0.1s linear;
}
/* Website Content */
.PageContent {
padding: 3% 15% 20px;
margin: 0;
color: #000;
font-family: Arial, sans-serif;
font-size: 1.4em;
}
.PageContentNav {
padding-top: 2%;
margin: 0;
float: left;
font-family: "PT Sans", sans-serif;
}
.PageContentNav ul {
padding: 0;
margin: 0;
list-style: none;
background: #E54D0B;
}
.PageContentNav ul li {
height: 50px;
padding: 0;
margin: 0;
line-height: 50px;
}
.PageContentNav ul li:hover a {
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: all 0.3s linear;
}
.Content {
margin-left: 4%;
float: left;
background: yellow;
}
.Content h2 {
font-family: "Arial Black", Gadget, sans-serif;
}
.Content p {
font-family: "PT Sans", sans-serif;
}
}
체크 아웃 플로팅, 디스플레이 : 인라인 블록, 디스플레이 : 플렉스, 디스플레이 : 그리드 ... –
@ j08691 코드를 이미 추가했습니다. 내가 게시 한 직후 누군가가 뭔가를 말할 줄 알았 기 때문에 코드를 추가하는 것이 최선의 결정이었습니다. 편집 된 게시물을 참조하십시오. –
@MarouenMhiri와 합의하면 여러 가지 방법으로이를 수행 할 수 있습니다. 한 가지 방법은 컨테이너 PageContentNav 및 Content 컨테이너의 너비를 정의하는 것입니다. 예를 들어 여기를 참조하십시오 : https://jsfiddle.net/qcckdqju/2/ – jcruz