Question

我一直在尝试各种可能尝试将侧边栏浮动到左边并使其适合内容div，但对我来说似乎是不可能的。请帮忙。

HTML：

  <div class="index-page">    

      <img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header">
        <h1> Welcome to Elektrik Host! </h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
        Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
        placerat eleifend leo.</p>
        <h1> A little about us </h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
        Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
        placerat eleifend leo.</p>
    </div><!-- //index-page -->
    <div class="sidebar">

      <img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">

    </div><!-- //.sidebar -->

CSS：

.index-page { color: #000; width: 462px; }
.sidebar { float: right; width: 200px; }

clearfix：

    .clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Answer 1

我总是发现将float内容放在提取内容的内容之前更容易，因此我将侧边栏切换到index-page div之前，并使用以下内容CSS：

  .sidebar {
    width: 200px;
    float: left;
  }

在JS Bin进行演示。

Answer 2

您可以按照本教程：http://css.maxdesign.com.au/floatutorial/index.htm

CSS代码

.floatright { float: right; }

HTML CODE

<p>
<img class="floatright" src"images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
<p>

你不需要直接将课程应用于图像。

<强> PK

Answer 3

.sidebar { float: left; width: 200px; }不是right
使它们旁边：
- 索引页面也需要floatleft index-page{ float: left;}（FF需要，IE不是）
- 将侧边栏移至索引页面之前

Divs不会漂浮

3 个答案: