代码之家 › 专栏 › 技术社区 › UpTheCreek

CSS Div 100%带浮点数:左

css html

UpTheCreek · 技术社区 · 14 年前

Agrh,CSS-我生命中的祸根。有人能帮忙吗?

我试图得到以下div布局:

*******************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*******************************************************************************

目前我的风格如下:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
}

#b {
float:left;
width:50px;
height:50px;
}

#c {
float:left;
width:100%;
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

但这会导致以下情况发生(div c低于其他情况):

********************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
********************************************************************************

要解决这个问题需要做些什么?谢谢。

其他信息:

a和b必须具有固定的像素宽度。
这是一个简单的例子-实际上div的边界不能重叠。

7 回复 | 直到 14 年前

meo 10 年前

只是不要 float 最后 div 那就行了。同时删除100%的宽度,并给它一个左边缘宽度为您的两个固定宽度div。应该是这样的:

http://jsfiddle.net/YMQbh/

AgentConundrum 14 年前

不要浮动“c”div。作为一个块元素,它自然会占据整个视窗的水平宽度。

你想做的只是用“c”左边的空白来给“c”旁边的“a”和“b”空间

试试这个:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#b {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#c {
/*   2x 50px wide div elements = 100 px
 * + 2x  1px left borders      =   2 px
 * + 2x  1px right borders     =   2 px
 *                              =======
 *                               104 px
 */
margin-left: 104px; 
}

scheffield 14 年前

首先,最好有一个固定宽度的容器。下一件事是100%的“c”是相对于容器的,所以它会扩展整个容器的宽度。

更新: 更准确地说:c div不需要浮动,也不需要宽度。就像其他人已经说过的那样:div(作为blocklevel元素)以其自身的宽度跨越整个宽度。

philgiese 14 年前

我认为只需为c div省略width属性就可以完成这项工作。通常情况下,div将跨越它们可以获得的整个宽度。这个例子对我很有用:

<html>
<head>
    <style type="text/css">
        #a {
            width: 50px;
            height: 50px;
            float: left;

            background-color: #ffff00;
        }

        #b {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #ff00ff;
        }

        #c {
            height: 50px;
            background-color: #00ffff;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>

Xr. 14 年前

而不是漂浮 #c ,我会给它一个 margin-left 然后离开 width 自动的。

Ben 14 年前

干得好:

<div style='width:200px;background:yellow;float:left'>One</div>
<div style='width:200px;background:orange;float:left'>Two</div>
<div style='background:khaki'>Three</div>

可以调整 One 和 Two 宽度视需要而定。测试工作在FF 3.6,IE 8,Safari 4.0,Chrome 3.195。

编辑

现在,带边框:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid green;margin:0 -1px'>Two</div>
<div style='background:khaki;border:1px solid black;margin-left:400px'>Three</div>

编辑2

非重叠边框(和对比色),热压:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid blue;margin:0 -1px 0 1px'>Two</div>
<div style='background:purple;border:1px solid orange;margin-left:403px'>Three</div>

chchrist 14 年前

#container {
float:left
width:100% /*for liquid layout*/
width:960px /*fixed layout*/
height:50px;
}

#a {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#b {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#c {
float:left;
width:90%;
/*or*/
width:860px; /* subtract the sum of the container a+b from the container c. */
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

如果您添加了填充,右边距或左边距,或两者兼而有之,您也必须从总宽度中减去它们。