CSS block float 问题

Question

我有一个带有右浮动导航面板和包装它的内容的网页。内容显示为多个相同大小的 div。问题是右面板是动态的，高度可变，在大多数情况下，当一个 div 放在面板下面时，它不会与前面的 div 保持在同一行，而是向下移动。这反过来又增加了行之间的空间。我想让一个 div 仅在它与前面的 div 保持在同一行并且不破坏页面布局的情况下才会放置在右侧面板下方。我怎样才能做到这一点？谢谢!

我的 HTML/CSS:

<div id="content">
<div id="navrgt">this is rigth navigation panel</div>

<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
  <div class="clear"></div>
      </div>

CSS:

#content
{
position:relative;
border:1px solid yellow;
}

.prodthumb 
{
float:left;
margin:10px;
width:200px;
height:200px;
background-color:grey;
}

#navrgt
{
position:relative;
float:right;
right:0px;
top:0px;
width:200px;
height:50px; /*height is variable. 50px is for this example only */
border:1px solid red;
}

div .clear 
{
clear:both;
}

Answer 1

我想这是你的问题:

在这种情况下，我建议用一个额外的 div 包装 prodthumb div。

这将使盒子像这样对齐:

代码如下:

HTML:

<div id="content">
<div id="navrgt">this is rigth navigation panel</div>

<div class="prods">
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="clear"></div>
</div>

CSS:

#content {
position:relative;
    border:1px solid yellow;
    }
    .prods {
        float:left;
    }

.prodthumb {
    float:left;
    margin:10px;
    width:200px;
    height:200px;
    background-color:grey;
}

#navrgt {
    position:relative;
    float:right;
    right:0px;
    top:0px;
    width:200px;
    height:50px; /*height is variable. 50px is for this example only */
    border:1px solid red;
}

div .clear {
    clear:both;
}