Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 浮动div仍在垂直线上,而不是水平线_Css_Html_Css Float_Alignment - Fatal编程技术网

Css 浮动div仍在垂直线上,而不是水平线

Css 浮动div仍在垂直线上,而不是水平线,css,html,css-float,alignment,Css,Html,Css Float,Alignment,在上,靠近底部有一个“自由访问”部分。理想情况下,我希望左边有自由形象,中间有签名,右边是成功形象。在960px的容器中,3个元素的宽度正好是840px,所以我认为这不是问题。为此,我使用: .signup { border-top: 1px solid #333333; float:left; padding-bottom: 40px; padding-top: 40px; overflow: auto; width: 280px

在上,靠近底部有一个“自由访问”部分。理想情况下,我希望左边有自由形象,中间有签名,右边是成功形象。在960px的容器中,3个元素的宽度正好是840px,所以我认为这不是问题。为此,我使用:

        .signup {
    border-top: 1px solid #333333;
    float:left;
    padding-bottom: 40px;
    padding-top: 40px;
    overflow: auto;
    width: 280px;
}

.signup p {
    padding-bottom: 20px;
}

.signup p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.signup #mc-embedded-subscribe {
    background: #0fddaf;
}

.signup .freedom {
    float: left;
    width: 280px;
}

.signup .success {
    float: right;
    width: 280px;
}

.clear {
    clear:both;
}


正如你所看到的,有些东西不太好用,我已经看了这么久了,恐怕我错过了一些简单的东西。有没有关于这个问题的想法?

给你正在浮动的元素一个宽度,那么它的行为应该是可预测的。

浮动、自由、形式和成功都没有了。然后,从.signup中删除宽度。

鉴于每个分区都有一个绝对大小,您应该能够通过将它们全部向左浮动并提供您想要的大小来获得所需的宽度


你还需要添加<代码>溢出:Auto/<代码> >代码> <代码>容器DIV,所以你的浮动内容保持在它之内。

< p>你想要左边的自由图像,中间的注册,右边的成功图像。s 为了得到第一个浮动的自由形象,并唱了左边的宽度明显。然后在右侧浮动成功图像

在上面的css中,请删除清除:两者;并使用另一个div-like清除所有浮动末尾的所有浮动 div.clear{clear:both}

快速和肮脏:

.signup
,float
.form
左边取宽度,给它280px的宽度
或者从
.signup
中获取宽度,并给
.form
一个额外的类
.freedom
。(
-相当叛逆,嗯?)

塔达

忠告
  • 在使用CSS之前先学习它,它将为您节省时间和将来的麻烦
  • 利润

  • 我给了每个div一个
    280px
    的宽度,运气不好。还有其他想法吗?我没有看过容器元素,但你不会想要它的宽度。所有区域大小都正确,并向左浮动。没有注意到任何变化。布局应该看起来像-你有填充物或边距使div变大并阻止它们在容器中并排安装吗?你说的很有道理。然而,在对代码进行编辑后,我注意到网站上没有任何变化。思想?(我已经更改了原始问题中的代码,以反映您的编辑。)