Html CSS Div 100%带浮动：左_Html_Css

Html CSS Div 100%带浮动：左

html css

Html CSS Div 100%带浮动：左,html,css,Html,Css,阿格，CSS——我生命中的祸根。有人能帮忙吗我正在尝试获得以下div布局： ******************************************************************************* *aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc* *aaaaaaaaaa bbbbbbbbbbbb cccccccccccccccccccccccccc

阿格，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>

要解决此问题，需要进行哪些更改？谢谢

其他信息：

a和b必须具有固定的像素宽度
这是一个简化的示例-实际上，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>


#a{
宽度：50px；
高度：50px；
浮动：左；
背景色：#ffff00；
}
#b{
宽度：50px；
高度：50px；
浮动：左；
背景色：#ff00ff；
}
#c{
高度：50px；
背景色：#00ffff；
}

#容器{
浮动：左
宽度：100%/*用于液体布局*/
宽度：960px/*固定布局*/
高度：50px；
}
#a{
浮动：左；
宽度：50px；
/*或*/
宽度：5%；
高度：50px；
}
#b{
浮动：左；
宽度：50px；
/*或*/
宽度：5%；
高度：50px；
}
#c{
浮动：左；
宽度：90%；
/*或*/
宽度：860px；/*从容器c中减去容器a+b的总和*/
高度：50px；
}

#c

左边距

宽度保持为自动。
给您：
<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>

编辑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>

1
两个
三
不要浮动“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; 
}

只要不浮动最后一个div就行了。另外，删除100%宽度，并为其留出两个固定宽度div宽度的左边距。这应该是这样的：
谢谢。因此，没有办法让第三个div扩展以填充剩余的空间？遗憾的是，我们将不得不等待或（即）赶上up@meo：与流体/弹性等相比，我更喜欢固定宽度。您有一个一致的参考框架，不必担心浏览器缩小到随机重叠的程度，浏览器也不会扩展到您的行太长而影响可读性，或者元素之间的空白太多。这就像在一张纸上画画——如果我在一张纸的（水平）中间画一个盒子，它正好落在我想要的地方，就像一个固定宽度的设计。它不一定更好，但它确实更容易。我不认为你可以说固定的比流体设计更好。这两种类型都有其存在的理由。对于网络应用程序来说，如果屏幕上有很多信息，那么使用流畅的布局是很有意义的。如果没有c上的宽度和宽度，它只是扩展到足以容纳内容——可能是因为它是float:left？Yapp。正如我的例子所示，只需忽略这个。顺便说一下。使用萤火虫！在那里，您可以在查看页面时轻松添加/删除/禁用/更改css属性。这样我就知道了我的大部分CSS错误。但是如果没有浮点，边框就乱七八糟了。我应该在问题中加上，a和b必须有像素宽度。这就是为什么我加了两个值（以px和%表示）来尝试，但不幸的是，在c上没有浮点，边框与a和b重叠会导致问题。您还可以在#b
上设置边距，并根据您的边框调整#b
和#c
的边距。然后c的边框会干扰a和b的边框。边框？您的示例中的边界在哪里？但请给我一分钟，我会添加边框。是的，很抱歉我展示了一个简化的示例-在我尝试删除浮动之前，我没有意识到它们的重要性。您更新的示例将不起作用。您还需要将边框调整到#c左侧的边距中。显示宽度！=宽度属性。@Agent，@Up-是的，正如@Agent所说，#c的边界将与#b的边界重叠。不过很容易修复，只需更改为左边距：401px，或查看编辑2中的所有边框不重叠。如果没有浮动，则c的边框与a和b的边框重叠-这会导致问题。@UpTheCreek:边框是元素总宽度的一部分。在确定c上的剩余保证金时，您需要考虑这些因素。例如，如果#a和#b都有一个1px的边框，并且假设没有边距/填充也会增加宽度，那么它们的内容总宽度将为50px，边框总宽度为2px（左1px+右1px），使它们的总宽度分别为52px，因此#c需要有一个104px的左边距，而不是我假设您尝试过的100px。这个答案（）我之前写的应该会把事情弄清楚一点。谢谢。JSFIDLE是一个很好的工具！感谢您提供这一简单但解释清楚的答案，这可能是
<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>

<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>

#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; 
}