标签: css-float

这有点难以描述,但基本上我的页面上浮动的div留下了不受欢迎的空间.这是描述问题的图片.黑匣子是div.

浮动之前:

浮动后:

期望的效果:

而且我不确定它是否有所作为,但我也有一个空的div,其中"clear:both"立即放置在浮动的div之后.

我怎样才能做到这一点？

我在这里阅读这个页面:http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/关于清除浮动而没有额外的标记,但它没有提到我认为你能做的事情.

我是否正确地认为你也可以通过不浮动最后一个元素来清除浮动？

因此,如果你想浮动3个元素,你浮动前两个,不要浮动最后一个....最后一个仍然会漂浮,但后面的任何东西都不会？

我有以下HTML

<style type="text/css">
<!--
.msg_ok{
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 16px;
    margin:0 auto;
    padding:10px;
    width:500px;
    height:auto;
    display:block;
}
.msg_ok{
    background-color:#DCFFB9;
    border:#003300 1px solid;
    color:#003500;
}
-->
</style>

      <div class="msg_ok" style="height:auto;">

        <div style="display:block;float:left;width:350px; height:auto;">
          <p>line 1<br>
          line2<br>
          line3<br>
          line4<br>
          line5<br>
          </p>
        </div>
        <div style="display:block;float:left;width:100px; height:auto;">
        <a href="#">Print</a>
        </div>

      </div>

我得到了这个结果

但是我怎么能得到如下结果,容器div的自动高度适合其大小与内部的浮动div？

提前致谢

当元素浮动时,不同的显示属性如何影响布局？或者,这些类之间有什么区别(如果有的话):

div.foo {
    display: block;
    float: left;
}

div.foo2 {
    display: inline;
    float: left;
}

div.foo3 {
    display: inline-block;
    float: left;
}

编辑:

如果根据规范没有差异,那么某些过时版本的浏览器(ahem,IE)会以不同的方式呈现它们吗？

这应该很简单,但我在获得强大的解决方案时遇到了问题.基本上我正在努力实现这个目标:

因此,使用图标字体将图标右对齐的元素(a或button).我需要确保:

1. 按钮可以是任何宽度
2. 如果没有图标,按钮上没有多余的填充
3. 文本和图标始终保持在同一行(不要换行)

这是HTML:

<button class="btn">Download <span data-icon="+"></span></button>

和(S)CSS:

.btn {
    margin: 0;
    padding: 3px 6px;
    vertical-align: middle;
    border: none;
    background-color: #535B99;
    color: white;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    text-transform: uppercase;
    [data-icon] {
        float: right;
        padding-left: 10px;
        &:before { content: attr(data-icon); }
    }
}

你可以在jsFiddle中看到这个.问题是,除非我向.btn类添加宽度,否则图标总是会掉线.绝对定位会起作用,但是我不能满足上面的(2),因为它需要一些填充.我错过了什么？

编辑

我错过了另一个标准:

4.)在100%宽度处,图标向右对齐(不在文本旁边)

所以在某些情况下,它看起来像:

这就是float我的CSS中必要的原因.

解

几乎完全基于@ Riskbreaker的解决方案,这就是我所确定的:

<button data-button-icon="+" class="btn" href="#">Click Me :P</button>

.btn {
    display: inline-block; …

正如标题所示我需要制作一个CSS网格而不会丢失浮点数,因为这会干扰Waypoints JS插件 ......

无论如何,我偶然发现,display: inline-block;但如果网格中的方框占据了容器宽度的100%,那么只有在一行代码中写入所有代码时才有效(JSFiddle 1)

由于我的项目是模板,我不能强迫用户在一行中写下他的所有代码.

有什么方法可以解决这个问题吗？

Udate 1:

white-space: nowrap;对我没有帮助,因为它搞砸了元素中的所有文本(JSFiddle 2)

Udate 2:

此 font-size: 0;解决方案对我没有帮助,因为我还需要父元素中的文本

这是我想用CSS实现的一个可视化示例:

另请参见http://jsfiddle.net/En4yC/3/

问题是我需要在图标旁边对齐文本,但不要给它一个严格的宽度,因为容器列是液体.你认为这有可能吗？也许一些负利润可以用于浮动？

//CSS
.column {
    width:33.3333%;
}

.ico {
    display: inline-block;
    float:left;
    width: 32px;
    height: 32px;
    margin-top: 4px;
    margin-right:10px;
    line-height: 32px;
    background-image: url("http://fakeimg.pl/32x32/");
    background-position: 0 0;
    background-repeat: no-repeat;
}

//HTML
<div class="column"> 
    <span class="ico"></span>
    <span class="title">Curabitur pharetra<br/> nibh eget<br/> lorem<br/> egestas laoreet</span>
</div>

我正在尝试将网站上的一个元素移到另一个元素。

基本上，我希望购物车按钮位于数量的右边。float: right将按钮水平移到正确的位置。但我也想将它们彼此相邻移动。

我对css浮动规则感到困惑.有人可以解释这背后的机制,而不仅仅是使它们看起来更好的解决方案.这是我的代码:

<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style type="text/css">
    div{
        width:400px;
    }
    ul{
        list-style-type: none;
    }
    li{
        float: left;
        margin: 4px;
    }

</style>

</head>
<body>
    <div>
    <ul>
        <li><img src="http://placehold.it/100x50&text=1"/></li>
        <li><img src="http://placehold.it/100x200&text=2"/></li>
        <li><img src="http://placehold.it/100x120&text=3"/></li>
        <li><img src="http://placehold.it/100x100&text=4"/></li>
        <li><img src="http://placehold.it/100x100&text=5"/></li>
        <li><img src="http://placehold.it/100x100&text=6"/></li>
    </ul>
    </div>
</body>
</html>

结果如下:

为什么地球上第4个元素属于第3个元素但不属于第1个元素？

我正在使用带有箭头的手风琴来打开和关闭它.它在手风琴关闭时指向下方,在手风琴打开时指向上方.

当div .accordionTitle:before向左浮动时,箭头仅指向左侧.我不能漂浮它,因为我需要它居中,当我居中它太长时间(我想缩短它,因为它通过CSS转换90度旋转)并妨碍它上面的按钮.

保证金0自动不起作用,因为它向左浮动,但当它没有向左浮动时,箭头没有指向下方.有任何想法吗？

这是两个小提琴:

.accordionTitle:在左前浮动之前:
http ://jsfiddle.net/Clare12345/tfooswzq/ Works

.accordionTitle:before {
float: left;
}

.accordionTitle:在浮动之前无: http ://jsfiddle.net/Clare12345/dqcv9svt/ 不起作用

.accordionTitle:before {
float: none;
}

左边的浮动是唯一的区别.提前谢谢你!