Question

我有一个带有右侧浮动导航面板的网页和包装它的内容。内容显示为相同大小的多个div。问题是右面板是动态的，具有可变的高度，并且在大多数情况下，当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

我想这是你的问题：

enter image description here

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

这会使框对齐如下： enter image description here

以下是代码：

<强> 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;
}

Answer 2

所以这是一个像你想要的一样的例子，我相信http://jsfiddle.net/RshTE/

唯一的问题是我相信IE6不会喜欢这个..我不喜欢支持ie6。

http://jsfiddle.net/RshTE/此示例中还显示了此代码的其他缺点。

但是，呃......享受？：d

我从来没有真正做过这样的事情，所以可能会有更好的方式，我只是不知道。

CSS：

#wrap {
    width: 600px;
    margin: 0px auto;
    border: 1px solid #e1e1e1;
}

#sidebar {
    float: right;
    width: 150px;
    border: 1px solid #e1e1e1;

    height: 220px;
}

.content-box {
    overflow: auto; /* Important part */
    border: 1px solid #e1e1e1;
}

HTML：

<div id="wrap">
    <div id="content">
        <div id="sidebar">Sidebar</div>
        <div class="content-box">Content box 1</div>
        <div class="content-box">Content box 2</div>
        <div class="content-box">Content box 3</div>
    </div>
</div>

修改： http://jsfiddle.net/RshTE/8/＆amp; http://jsfiddle.net/RshTE/9/

（有关display: inline;黑客http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/）的信息

CSS阻止浮动问题

2 个答案: