Question

这是我的情景。 #main_content div包含导航链接的#nav_leftsidebar div（左侧浮动），#bottom_leftsidebar div（左侧浮动）堆叠在#nav_leftsidebar下方（通过清除浮动左侧）以获取其他信息/链接，以及#page_content div和#nav_leftsidebar div右侧的#bottom_leftsidebar div（无浮点）。

我正在尝试将文本包裹在page_content div左上角的图像周围，但是当我浮动时：离开图像，图像会下降到我的文本下方并对齐#bottom_leftsidebar div的左侧。

#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>