标签: css-float

所以我有以下CSS来显示水平导航栏使用:

.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigation li {
  float: left;
  margin: 0 1.15em;
  /*    margin: 0 auto;*/
}

.navigation {
  /*    width: auto;*/
  /*    margin: 0 auto;*/
  text-align: center;
}

我的问题是:如何将标题上方的导航栏对齐？

我正在开发一个响应式网页设计,将4列中的多个项目并排放置.这些物品具有不同的高度,因此漂浮不起作用.

这就是目前发生的事情:

漂浮错误http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

关于如何使元素浮动的任何想法:

右侧漂浮http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

我想这应该适用于jQuery"砌体",对吧？但是我正在使用Zepto.js,我猜一个jQuery插件不起作用.

是否有任何纯CSS(CSS3)方式？有些窍门？

如果这不适用于纯CSS或JS,则可以这样做:

浮动不同http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

现在,第5行,第6行和第7行不会像你期望的那样"真正"浮动,但内部有一个隐藏的换行符(clearfix).

纯CSS有没有办法解决这个问题？例如使用nth-child(4n+4)和伪选择器喜欢:after应用换行符content吗？

有什么想法吗？任何聪明的技巧使这项工作？

问题简单而简短:为何overflow: hidden;明确浮动？我查看了w3标准文档,并没有暗示任何内容.

我想要一个由三个相邻div组成的布局.边div具有静态宽度(可以通过javascript更改)并且中心div填充剩余区域.当第一个div的大小改变时,它只影响中心的大小.它类似于由三列组成的表(带有动态渲染).

好的,问题出在哪里.问题是,如果我将浮动左div放入第一列,并在第二列和第三列中阻塞div,则块div以奇怪的方式运行.它们在第一列浮动div下方的列中呈现.

一个例子.在第一列和第二列中,我有浮动div,并在第三列中有块div.块div在浮动div的高度附近向下移动.中间列中的Div不会在其y位置移动,只是它具有浮动左侧属性.

我希望三个布局div中的每一个都相互独立.我不知道为什么第三列中的元素在前两列中浮动div(使用float属性).

码:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

结果: 结果

如何解决这个问题.如何使所有布局div(列)彼此独立.有任何想法吗？

我试图将一个具有不同宽度的Div(基于网站内容)居中.

我在这里阅读了一个相对定位技术:

http://www.tightcss.com/centering/center_variable_width.htm

但我认为必须有一个更简单的方法吗？

我有<h2>一个固定的标题<div>(238px).呈现此页面时,浏览器管理行中断标题以使文本适合宽度(238px).

但是h2元素的width属性仍然是238px,不管断行是什么.

我想border-bottom在文本下面设置一个,而不是在h2元素的全宽下,我不知道如何使用CSS实现这一点.

你可以在这里看到我的意思:http://jsfiddle.net/np3rJ/2/

谢谢

我的mainContainer高度不遵循他们的孩子宽度

这是我的代码你有什么建议请指教.

我需要CSS解决方案而不是JavaScript,所以提前感谢

<div id="mainContainer">
    <div id="leftContent">

    </div>

    <div id="rightContent">

    </div>
</div>

这是我的CSS

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;
}
#leftContent{
    height: 100px;
    float: left;
    width: 380px;
    background-color: violet;
}
#rightContent{
    height: 100px;
    float: right;
    width: 620px;
    background-color: yellow;
}

我有一个简单的HTML结构(jsfiddle):

<li>
    <div class="buttons">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners">
        ???? ??????? ? ???? ????????
    </div>
    <div class="text">
        ?????-???? ?????-???? ?????-???? ?????-????
    </div>
</li>

buttons,owners并text有display: inline-block.

当text相当小时,这看起来很好:

但是,随着文本的增长,inline-block元素会延伸并最终落在该行上:

这很难看,我想避免这种情况.
我想要实现的是:

当文本太大而无法放入元素内部时,我希望它被行包裹.
我尝试设置float: left元素,但无法使它工作.

使用HTML和CSS(没有表格)执行此操作的正确方法是什么？

我一直在做类似suckerfish的下拉菜单.我现在有下拉式工作,但是我有一些想要放在链接两侧的图像.现在我正在使用图像大小的div,然后将background-image属性设置为我需要的图像(这样它可以使用pseudo:hover类进行更改).

这是适用的CSS:

ul#menu3 li {
    color: #000000;
    float: left;
    /*I've done a little playing around here, doesn't seem to do anything*/
    position: relative;
    /*margin-bottom:-1px;*/

    line-height: 31px;
    width: 10em;
    padding: none;
    font-weight: bold;
    display: block;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-tile.gif);
}
.imgDivRt {
    width: 20px;
    height: 31px;
    display: inline;
    float: right;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-right.gif);
}
.imgDivLt {
    width: 20px;
    height: 31px;
    display: inline;
    float: left;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-left.gif);
}    

我使用选择器来节省一些不同的类,但Internet Explorer似乎不支持它们:(

这是我的HTML适用:

<li><div class="imgDivLt"></div>Option 1<div class="imgDivRt"></div>
<ul>
    <li><a …

我正在寻找关于我正在进行的项目的一些建议,并会感谢任何帮助.

目标:

制作拖放CMS,允许用户在网格上绘制元素并将其移动到所需位置.更改以JSON格式记录,并在用户按下发布按钮时转换为HTML/CSS.生成的HTML应该是干净和灵活的(即适应高度/长度不同的内容).系统应该能够处理创建电子商务站点以及简单的信息站点.

问题:

在HTML中实现拖放系统的逻辑方法是使用absoluteset widths和heights进行定位; 由于内容可能具有可变长度,并且由于绝对定位的元素从文档流中取出而不知道它们周围的元素,因此该方法不适合于完成的站点.

解:

创建一个系统,将绝对定位的元素转换为浮动元素.

例:

在CMS系统中,用户通过在网格上绘制框来创建以下布局:

1. 固定高度的标头
2. 可变高度的导航
3. 固定高度的图像
4. 可变高度页面的主要内容
5. 可变高度的访问项目列表
6. 固定高度的页脚

绝对布局:

HTML/CSS将是这样的:

body {
    background-color: #999999;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 70%;
    margin: 15px 0;
    padding: 0;
}
#mainContainer {
    background-color: #FFFFFF;
    height: 500px;
    margin: 0 auto;
    position: relative;
    width: 916px;
}
.contentBlock {
    border: 1px solid orange;
    box-sizing: border-box;
    color: orange;
    font-size: 2em;
    text-align: center;
}
.contentBlock:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle; …