我试图在我的div中创建一个右侧边栏，但它不起作用。它一直坐在我的主包装外面。有什么建议吗？
HTML：
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932. In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation of the Butler County Regional Airport as you see it today.</p>
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li> Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div><!--sidebar end-->
CSS：
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width:260px;
padding:10px;
margin-top:10px;
margin-bottom: 10px;
margin-left:10px;
float:right
}
这是我的小提琴：https://jsfiddle.net/5w8xprqg/2/
答案 0 :(得分：2)
如果您对固定宽度的布局感到满意，那么这里是您的小提琴的最小变化，需要将侧边栏放在应有的位置。如果您需要响应式布局，则必须切换到定义宽度等百分比。
CSS
wrapper {display:table
}
.body-text {margin: 10px;
float: left;
width: 470px;
}
更新的jsfiddle。 https://jsfiddle.net/5w8xprqg/3/
一个错误是在你的正文文本右侧使用320px边距，这绝不会让你的侧边栏在正文旁边流动。用宽度做那种事。同样在DOM上方的元素上使用float:left通常比尝试进一步向下float:right元素更好。请注意，您并不需要.side-right元素上的浮点数，但它可以正常工作。
另外还有其他方法可以避免您的问题，并以较少的css获得优质的布局。
我相信您遇到的一个问题是wrapper.底部的文字溢出了这通常可以通过添加display:table;或overflow:hidden来阻止。最后一个做的不是您期望的是，但是不是溢出的文本被隐藏，而是强制容器向下伸展并包含它。
今天使用宽度的百分比也是一种更好的做法。
请参阅此jsfiddle，并注意如何使CSS布局正常工作。 http://jsfiddle.net/5w8xprqg/4/同时调整结果框的大小以查看文本如何调整以适应宽度。
要在非常窄的宽度上获得更好的布局，您可能需要添加媒体查询。
答案 1 :(得分：0)
有很多方法可以做到这一点，这取决于你是否希望你的bodytext包裹你的侧边栏。这是一种方法，我创建了一个设置宽度的左侧，右侧设置了设置宽度。在这里小提琴：http://jsfiddle.net/t0837grw/
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #ccc;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px;
padding: 20px;
}
.sideleft
{
display: inline-block;
width: 65%;
}
.sideright {
display: inline-block;
vertical-align: top;
width:30%;
margin: 0 10px;
}
这是设置宽度的替代小提琴：http://jsfiddle.net/6e6btgds/
答案 2 :(得分：0)
在问题代码的上下文中，最简单的解决方案可能是交换标记中.bodytext和.sideright元素的位置。
@charset "UTF-8";
/* CSS Document */
body {
background-color: #2c3439;
color: #FFF;
}
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
#topnav ul {
margin: -11px -10px 10px -10px;
text-align: center;
padding: 1%;
background-color: #000;
color: #FFF;
}
#topnav li {
display: inline;
margin: 0px 40px;
}
.centerimage {
margin: 10px 165px;
}
p {
text-indent: 2.5em;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width: 260px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px float: right
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="topnav">
<ul>
<li>Home</li>
<li>Aircraft Rental</li>
<li>Contact Us</li>
<li>Flight Training</li>
</ul>
</nav>
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li>Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div>
<!--sidebar end-->
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932.
In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the
years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation
of the Butler County Regional Airport as you see it today.</p>
</div>
<!--text div end-->
</div>
<!--Wrapper End-->
</body>
</html>