标签: css-float

我想显示一些浮动框(包含缩略图的div),缩略图的数量取决于当前的页面宽度.例如:

<div class="container">
  <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
    .......... ETC
</div>

问题是,对于给定的宽度,它显示每行上有4个方框,但它们都是左对齐的,右边有一些空白区域,我怎样才能水平居中每一行？

像这样的东西:http://realworldstyle.com/thumbs_3.html但页面上水平居中的框...

提前致谢,

我们应该如何使用不带表的css制作6列布局，并在上面放置一层，在buttom中放置一层？（有浮点数？我尝试没有成功）

谢谢

当我有三个div都悬空时,我希望这些部分根据它们内部数据的长度来扩展或收缩.

例如,如果第一个地址很长,我希望第一个框展开并推动第二个框.在Firefox中它正在这样做,但在Internet Explorer中它需要一个宽度看起来正确.在IE7中,它根本不显示 - 每个div都有一个包含两列的表格,在IE7中,它显示第二列到达页面的远端而不是第一列,尽管设置了align = left第2列并在第1列设置小宽度.我有母版页中指定的文档类型,我尝试添加清除:两者都没有运气.

为什么宽度完全改变浮动部分在IE中的显示方式,我该如何解决这个问题呢？该页面必须在IE7中看起来不错.

.FloatingSection
{
    float:left;
    padding-bottom:10px;
    padding-right:10px;
}

<div id="FirstPerson" class="FloatingSection">
</div>
<div id="SecondPerson" class="FloatingSection">
</div>
<div id="ThirdPerson" class="FloatingSection">
</div>   

我注意到在IE8中这看起来很好.

<div style='width:500px'>  
<ul>  
  <li> some text in 1 line</li>  
  <li> some text in 1 line</li>  
  <li> some text 2 line</li>  
  <li> some 2</li>  
  <li> 2</li>  
</ul>
</div>

我不知道用于显示项目的正确css代码是什么,例如:

前两个结果自动适合第一行,其余结果在第二行. 所以基本的想法是让li根据数据大小获得自己的宽度.

提前致谢

我希望我的页脚(在某些页面上)保持固定在浏览器窗口的底部,而不管内容的高度.与您在www.facebook.com和meebo工具栏(例如abduzeedo.com)等网站上浏览器窗口底部固定的某些工具栏类似.

我做了一些快速搜索,我看到一些jQuery脚本和CSS黑客用户抱怨IE不兼容等等...有一个很好的标准方法吗？即使使用meebo和facebook,看起来工具栏在滚动时也会有点跳跃,而CSS解决方案看起来非常可靠.有简单的CSS解决方案吗？我认为这是使得页脚与底部具有绝对定位的线条:0 ......

我有一个div(div1),它的位置,宽度,高度,所有设置都已设置,并且它是在外部设置的,所以我不能提前知道这些值是什么.

里面和顶部div1是另一个div(div2).我想div2漂浮在右边div1而不影响以下信息div1.

我可以添加属性position:absolute并获得div2浮动而不影响内容,但是,即使在应用时,我也无法将其浮动到右侧float:right.

我已经阅读了很多关于这个问题的其他帖子,但没有效果.我希望有一个背景图形扩展页面的整个长度,但它只下降了2/3.

html, body { height: 100%; }

div#body-wrapper {
   height:100%;
   position:relative;
}

nav#side-navigation {
   height:100%;
   width:185px;
   background-color:#C2F4C2;
   float:left;
}

div#content-wrap {
   width:775px;
   height:100%;
   float:right;
   position:relative;
   background:transparent url(../images/global/column_corner.gif) no-repeat top left;
}

如果我添加overflow:hidden到#body-wrapper,它会切断网站底部的一部分.

最后,这里有源代码:http://freshbaby.com/v20/about_us/index.cfm

所以我有一个div和两个跨度:

<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

假设B和C具有足够的内容.CSS片段是:

.A { position: absolute; } /* I need this to be absolute */
.B, .C { float: left; }
.clear { clear: both; }

但我一直在获得正确图像的布局,而我希望它像第一张图像的布局(参见下图)

请帮我.如果你好好解释一下为什么会发生这种情况会更好,为什么我的代码不像我预期的那样工作.浮动实际上是如何工作的.谢谢.

我不是css的专家,但我想让浮动的div工作.我有两个div,顶部一个漂浮在左边,另一个div应该右边.它似乎有点这样做.问题是,即使它看起来正确,它实际上并没有将盒子推到右侧.我有一个jsfiddle,你会明白我的意思.我在div上设置了一个名为content的红色边框.你会看到内容看起来是正确的,但是h1下面的虚线红线从浮动对象的开头而不是H1标题下开始.请帮我理解.这里是jsfiddle:http://jsfiddle.net/wCnY3/

<div id="subNav">box</div><div id="content">WELCOME</div>

好的,我在理解float属性的行为时遇到了问题.

页面宽度为750像素.为了使它位于屏幕的中心,我使用了以下代码:

<div align="center">
    <div align="left" style="width:750px; border-style:double;">
        stuff
    </div>
</div>

主750 px宽容器中的元素是具有以下样式的其他容器:

div.infoCont //these containers usualy have two more containers within- for an image and text
{
    width: 740px;
    position: relative;
    left: 2px;
    border-style: double; //for debugging
    float: left;
}
div.textContNI //text only
{
    width: 730px;
    float: left;
    clear: right;
    border-style: double; //for debugging
}

小容器表现正常(它们应该是,因为它们的位置和我想要的方式一样大).但是主容器的高度比较小的容器的总高度少了很多...... 0 px.它忽略了所有较小容器的高度.

这可以通过在主容器的结束标记之前添加文本来"修复".我还可以使用<br>标签操作高度而不使用文本:高度变得与边框的总高度一样大.另一种"修复"问题的方法是添加float:left;样式,但是将容器放在窗口的左侧,我不能拥有它.

我错过了什么,我不知道它是什么.

为什么主容器会忽略其中容器的总高度,我该如何处理这个错误呢？