html - 在整体包装之前，我怎样才能在内部有一个内部 div 包装？

Question

在我的网站上，我有一个包裹着另外两个 div 的 div。左侧内部 div 宽度较窄，而右侧 div 较宽(由文本组成)。

当我减小窗口的宽度时，一旦到达最右侧内部 div 的最右侧边缘，整个 div(及其所有内容)就会包裹在左侧内部 div 下方。当我进一步调整窗口大小时，曾经正确的 div 内容(文本)开始换行。

基本上，我有这段代码:

<style type="text/css">
#wrapper {
  width: 100%;
}

#leftdiv {
  float: left;
}
</style>

<div id="wrapper">
  <div id="leftdiv">
    shortleft
  </div>
  <div id="rightdiv">
    longrightlongrightlongright
  </div>
</div>

但是，我希望右侧 div 中的文本在整个 div 环绕到左侧 div 下方之前环绕。我该怎么做才能修改我的代码以实现这一目标？

Answer 1

试试这个:

#wrapper {
  width: 100%;
 }

#leftdiv {
  width: 20%;
  float: left;
}

#rightdiv {
  width: 79%
  float: right;
 }

如果你想看到它的实际效果，请查看我的网页

http://sherwoods-forests.com

百分比不应加到 100。当渲染引擎计算像素数时，由于四舍五入，您有时会得到奇怪的结果。

左边的导航栏就是这样做的。
在内容 div 中，每张图片及其标题都向左或向右浮动，主体文本环绕。您还需要使用嵌入式 div 的边距