Question

我将是第一个承认我是新手的人，所以如果以前已经回答过这个问题，请原谅我。也许我没有正确写出我的问题，找到我要找的答案。

我有一个带有快速参考链接的子容器，左边是要引用的文本，应该在右边的父文件中。如何让父文本中的文本包装在绿色可视区域中而不是整个父容器中（在子项后面）？

<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容器上，并且填充左边有填充（或者左边缘，它应该没有区别）。< / p>

使用你的容器（虽然我把盒子换成了div，但我需要显示这个元素：block，它是div的默认显示。）

div.ministry2 {
  position: fixed;
}

.box {
  padding-left: 250px;
}

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

父文字包裹在孩子旁边而不是在它后面？

1 个答案: