为什么左边漂浮不能按预期工作？

Question

我预计图片位于列表右侧，但没有..

<main class="works">
    <div class="izq">
      <nav>
                <li><a class="" href="/app_dev.php/works/35">eeeee</a></li>
                <li><a class="" href="/app_dev.php/works/36">fasdf</a></li>
      </nav>
    </div>
    <section>
        <img src="http://www.seobook.com/images/smallfish.jpg">
        <img src="http://www.seobook.com/images/smallfish.jpg">
    </section>
</main>



.works {
    width: 600px;
}
div {
   float: left;   
}
section {
    float: left;
}

jsfiddle

Answer 1

.works {
    width: 600px; <--- not enough space to maintain float
}

似乎是问题 - 没有足够的空间来维护浮动see adjusted fiddle here，即600px的水平空间不足以在浮动时“适应”图像。增加或删除600px分配。

Answer 2

您需要为.section班级

提供宽度

实验室 labs.codeteam.in/lab/PBDAedPvVki~Mu1eYT4AqndZUOdeapGx