0
私は人々がこのような質問をした場所をいくつか見つけましたが、それらの場所の回答は私を助けませんでした。私は自分の疑問を尋ねる運が増えるだろうと思っています。2つのdiv要素が並んでいる問題
私が働く会社のためのベース/プロトタイプのウェブサイトをデザインしようとしています。私たちのサービスページでは、コンテンツは右側に表示されていますが、左側にはさまざまなサービスのサイドバーナビゲーションメニューが必要でした。ページに内容を追加して段落を2行目に追加するまで、うまくいきました。一旦それが起こると、コンテンツ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と合意すれば、これを達成する方法はたくさんあります。たとえば、Container PageContentNavとContentコンテナの幅を定義するなどの方法があります。ここで例を見てください：https://jsfiddle.net/qcckdqju/2/ – jcruz