html - CSS 在非 float div 容器中环绕图像的文本

Question

这是我的场景。 #main_content div 包含一个 #nav_leftsidebar div(向左浮动)用于导航链接，#bottom_leftsidebar div(向左浮动)堆叠在#nav_leftsidebar下方(通过清除向左浮动)其他信息/链接，以及 #page_content div(无 float )在 #nav_leftsidebar 的右侧div 和 #bottom_leftsidebar分区

我试图将文本环绕在 page_content div 左上角的图像周围，但是当我 float: left the image 时，图像下降到我的文本下方并与 #bottom_leftsidebar 左对齐分区

#main_container {
  width: 983px;
  margin: 0 auto;
  padding: 5px 0 0 0;
}

#nav_leftsidebar {
  float: left;
  width: 250px;
  padding: 5px 10px 0 0;
  margin: 5px 0 0 0;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #C0C0C0;
}

#bottom_leftsidebar {
  float: left;
  clear: left;
  width: 250px;
  padding: 5px 10px 0 0;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #C0C0C0;
}

#page_content {
  position: relative;
  width: 950px;
  margin: 5px 0 0 10px;
  left: 10px;
}

<div id="nav_leftsidebar">
  <ul class="nav_sidebar">
    <li> Items ... </li>
  </ul>
</div>

<div id="bottom_leftsidebar" style="height: 200px">
  bottom_leftsidebar div
</div>

<div id="page_content">
  <h1>Network Design</h1>
  <img id="Img1" alt="" src="~/images/it_networkdesign.jpg" style="float: left; margin: 0px 5px 5px 0px" runat="server" />
  <p>
    Content ...
  </p>
</div>

如何将图像定位在 #page_content 的左上角？ div 并将文本也环绕在图像的右侧和底部？

如有任何帮助或指导，我们将不胜感激。

Answer 1

将两个侧边栏包裹在“页面内容”div 中。还可以考虑将图像放在 <p> 中标签。这就是我的意思:

<div id="page_content">    

<div id="nav_leftsidebar">
        <ul class="nav_sidebar">
            <li> Items ... </li>
        </ul>
    </div>

    <div id="bottom_leftsidebar" style="height: 200px">
        bottom_leftsidebar div
    </div>


        <h1>Network Design</h1>
        <p><img id="Img1" alt="" src="~/images/it_networkdesign.jpg" style="float: left; margin: 0px 5px 5px 0px" runat="server" />

            Content ...
            </p>

</div>