html - CSS 侧边栏不起作用？

Question

我尝试在我的 div 中创建右侧边栏，但它不起作用。它一直坐在我的主 wrapper 外面。有什么建议吗？

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
}

这是我的 fiddle :https://jsfiddle.net/5w8xprqg/2/

Answer 1

如果您对固定宽度布局感到满意，那么为了使侧边栏位于应有的位置，需要对您的 fiddle 进行最小的更改。如果您想要响应式布局，则必须切换到定义宽度等百分比。

CSS

wrapper {display:table
 }

.body-text {margin: 10px;
            float: left;
            width: 470px;
 }

以及更新的 jsfiddle。 https://jsfiddle.net/5w8xprqg/3/

一个错误是使用 320px正文右侧的边距永远不会让侧边栏在正文旁边流动。使用宽度来代替做这种事情。还使用float:left在 DOM 上方的元素上通常比尝试 float:right 效果更好再往下的元素。请注意，您实际上并不需要 .side-right 上的 float 。元素，但它有效。

---

另外，还有其他方法可以避免您的问题并使用更少的 CSS 获得出色的布局。

我相信您遇到的一个问题是 wrapper. 底部的文本溢出。通常可以通过添加 display:table; 来防止这种情况。或overflow:hidden最后一个所做的并不是您所期望的，但它并没有 overflow hidden 的文本，而是强制容器向下拉伸(stretch)并包含它。

今天使用百分比作为宽度也是更好的做法。

查看此 jsfiddle，并注意需要很少的 css 才能使布局正常工作。 http://jsfiddle.net/5w8xprqg/4/还可以调整结果框的大小，以查看文本如何调整以适应宽度。

为了在非常窄的宽度下获得更好的布局，您需要添加媒体查询。