我在另一个<div>有一个浮动<div> ,包含div有一个黑色边框...

问题是浮动的<div>实际上并没有占据它的高度(大约600px)左右,因此带边框的包含<div>最终高达20像素高,边框直接通过内部div 。

我如何让内部div占据它应该占据的空间,同时仍然让它浮动?

这是我的来源:

<div style="border:1px solid black">
    <div style="float:left;height:200px;"></div>
</div>

===============>>#1 票数:20 已采纳

使用micro-clearfix方法:

<div style="border:1px solid black" class="cf"> 
  <div style="float:left;height:200px;"> 
  </div> 
</div>

CSS

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
  *zoom: 1;
}

  ask by raybob95 translate from so

未解决问题?本站智能推荐:

1回复

如何使HTML列表环绕浮动内容

假设我有一个HTML图形,该图形浮动在左侧,并带有环绕的文字: 这很简单; 该图将浮动到左侧,而段落列表将环绕在右侧的图周围。 但是,项目符号列表看起来很奇怪。 项目符号将不会与其上方的段落内容保持一致。 对于定义列表<dl> ,即使<dt>和<
3回复

边距占用空间,但没有背景

我有树层:菜单,内容和页脚。 内容层具有白色背景。 当我在margin-20px的内容层中放置另一个div时,将设置边距,但不设置边距顶部的白色背景。 因此,我的文本仍位于内容层的上边界,并且菜单和页脚之间有20px的空间是我不想要的。 http://jsfiddle.net/B
2回复

HTML CSS 相同DIV元素之间的垂直间距

此刻,我在第一张照片中看到了什么。 我想知道如何在图像之间添加空格(底部边距?),如图2所示? 它们的2个并排的块是2个不同的DIV,并且每行中的图片都是同一div的元素,因此底边距不起作用。 (底部代码) 图片1: 图片2 HTML: CSS:
1回复

如何在没有额外标记的情况下清除div浮动后的块元素?

我有两个浮动div,在它们之后,我有一个margin-top的块元素。 不幸的是,由于浮动,上margin-top不起作用。 是否可以在代码中没有额外标记的情况下添加margin-top ? 我尝试了:after ,但没有帮助。 div { background-co
1回复

Firefox在div中的图像后添加额外的空间(或使div更大)

他大家 我正在使用的这个网站上的Firefox有问题: 链接 我已经建立了一个水平滑块,该滑块在所有浏览器上都可以使用,除了firefox(两者都是Windows的OSX)。 问题在于, firefox在滑块中的图像之后显示的边距/填充/空间比其应有的5px左右边距要多 。
2回复

CSS:将文本包装到div中,以便div占用文本的长度

这是一个代码: 小提琴 时间是使用javascript计数的,因此在页面加载后可以更改字符串的长度。 如何确定背景的长度#68c5e7,使其具有适当的长度(对应于img + text的长度)。 同样,将9:58更改为10:03,但是背景颜色的长度没有更改,因此不合适。 还
2回复

在浮动div和底部div之间放置一个空格

我正在尝试在两个浮动div的底部创建一个div,但在底部div和其他div之间留有边距。 这是小提琴 HTML: CSS:
2回复

div下面的空间未知?

我似乎在div对下遇到未知空间。 我使用了Bootstrap网格概念,并利用行和列来创建2个相邻的Div。 然后,我使用CSS来使div填充屏幕的整个空间,但似乎无法解释divs以下的空白。 我已经尝试过包括高级CSS重置。 这是html: #half_box_1
6回复

下方有额外空间

div后面有一些额外的空格,带有id“header”元素(第二个div)。 如果我删除p,div元素之间没有空格。 如何在不移除p元素的情况下杀死两个div元素之间的空间以及为什么它会像它一样? body { margin: 0px; padding: 0px; } div#
4回复

div和img之间的空间?

我有这样的代码: “sc”div和“separator”img之间总共有13px的差距。 两者的边距和填充都设置为0,null,空,没有。 哎呀。 我很生气; d 我试图弄清楚萤火虫发生了什么,但它们之间的空间不属于任何东西,它不是边缘,不是填充物,到底是什么? 没