html - 父文本环绕在 child 旁边而不是后面？

Question

我将是第一个承认我是新手的人，所以如果之前已经回答过这个问题，请原谅我。也许我的问题措辞不正确，无法找到我正在寻找的答案。

我有一个子容器，左边有快速引用链接，它要引用的文本应该在右边的父容器中。如何让父容器中的文本包裹在绿色可视区域中，而不是跨越整个父容器(在子容器后面)？

Text Wrapping Problem

<div class="ministry1"><div class="ministry2">
<ol id="sidebar1">
  <li><a href="#01">The Scripture</a></li>
  <li><a href="#02">God</a>
    <ul id="side1">
      <li><a href="#001">God the Father</a></li>
      <li><a href="#002">God the Son</li>
      <li><a href="#003">God the Holy Spirit</li>
    </ul>
  </li>
<li><a href="#03">Man</a></li>
<li><a href="#04">Salvation</a></li>
<li><a href="#05">God's Purpose of Grace</a></li><!--'-->
<li><a href="#06">The Church</a></li>
<li><a href="#07">Baptism and the Lord's Supper</a></li><!--'-->
<li><a href="#08">The Lord's Day</a></li><!--'-->
<li><a href="#09">The Kingdom</a></li>
<li><a href="#10">Last Things</a></li>
<li><a href="#11">Evangelism and Missions</a></li>
<li><a href="#12">Education</a></li>
<li><a href="#13">Stewardship</a></li>
<li><a href="#14">Cooperation</a></li>
<li><a href="#15">The Christian and the Social Order</a></li>
<li><a href="#16">Peace and War</a></li>
<li><a href="#17">Religious Liberty</a></li>
<li><a href="#18">The Family</a></li>
</ol></div>
<h1>Baptist Faith and Message</h1>

<p id="box">

<h3 id="01"><u>I. The Scriptures</u></h3>

(下面还有很多文字...)

它们的样式如下...

div.ministry1 {
  display: block;
  margin: auto;
  background-color: #99ff99; 
  border: 2px solid #660066;
  width: 1070px;
  height: 446px;
  overflow: auto;
  font-family: 'Ubuntu', sans-serif;
  opacity: 0.90;
}

div.ministry2 {
  display: block;
  position: fixed;
  float: left;
  background-color: lightblue;
  border-right: 2px solid #660066;
  width: 225px;
  height: 446px;
  overflow: auto;
  font-family: 'Ubuntu', sans-serif;
  opacity: 0.90;
}

#box {
  float: right;
  padding: 8px 10px 10px 10px;
  opacity: 1.0;
}

Answer 1

如果您希望所有内容都是固定宽度，最简单的解决方案是固定 sidebar1 并使用 div 容器将右侧的内容包裹起来，并满足 padding-left(或 margin-left，这在这里应该没有区别)。

使用您的容器(虽然我将 box 换成 div，但我需要显示此元素:block，它是 div 的默认显示)。

div.ministry2 {
  position: fixed;
}

.box {
  padding-left: 250px;
}

您可以在此处查看此解决方案的外观:http://codepen.io/anon/pen/oLyEmV