css - CSS浮动像素和混合百分比

Question

好的，我想要这个：

为此，我有这个 HTML 代码：

<div id="wrapForCenter">
    <div id="title">
        title
    </div>
    <div id="contentFrame">
        <div id="imagePlaceholder">
            image
        </div>
        <div id="content">
            content
        </div>
    </div>            
    <div id="buttonsBar">
        buttonsBar
    </div>      
</div>

我有这个 CSS 代码：

#wrapForCenter
{
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -240px;
    width: 480px;
    height: 320px;
    border: 1px solid black;
}

#title
{        
    width: 100%;
    height: 40px;
    background-color: Blue;
}

#contentFrame
{
    height: 240px;
    width: 480px;
}

#imagePlaceholder
{
    float: left;
    width: 100px;
    height: 100%;
    background-color: Green;
}

#content
{
    float: left;
    width: 380px; /*<-- look at this*/
    height: 100%;
    background-color: Yellow;
    overflow: auto;
}

#buttonsBar
{
    clear: left;
    width: 100%;
    height: 40px;    
    background-color: Silver;
}

如果我将内容宽度更改为 100%，为什么会发生这种情况？

我预计内容宽度将是 contentFrame 减去 imagePlacehoder 宽度（以像素为单位），但是当我为 imagePlacehoder 和内容指定 float:left 时，内容获取其父容器宽度。为什么？

是否有另一种方法可以在不使用浮点数的情况下获得相同的结果（可能是显示：内联）？并使用 width:100% 作为内容？

非常感谢。CSS 不是我的强项。

Answer 1

这称为浮动下降。浮子的工作原理是只要每个都有足够的空间，它们就可以并排放置，但是如果没有足够的空间来容纳，浮子会撞到前一个的下方。

width:100%意味着使其 100% 与其容器一样宽 (#wrapForCenter)。自然地，如果你告诉某个东西是它的容器的整个宽度，那么任何东西都不能放在那个容器的任何一侧，所以作为一个浮动它必须向下移动到它之前的任何东西（更早的“兄弟”）下面才能适应。

Answer 2

我自己之前在stackoverflow中问过一个类似的问题。

如何使用 jQuery 或 CSS 自动调整（拉伸）div 的高度和宽度

您可以设置HTML 之类的；

<div id="container">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
</div>

和CSS一样；

#container {
    position: relative;
    width: 300px;
    height: 200px;
}
#top, #left, #right, #bottom {
    position: absolute
}
#top {
    top: 0;
    width: 100%;
    height: 50px;
    background: #00b7f0
}
#left {
    top: 50px;
    width: 50px;
    bottom: 50px;
    background: #787878
}
#right {
    top: 50px;
    left: 50px;
    right: 0;
    bottom: 50px;
    background: #ff7e00
}
#bottom {
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #9dbb61
}

这是工作演示。

希望这可以帮助..

注意：我建议（不强迫）您在提问之前在 stackoverflow 中进行搜索。

Answer 3

您应该将图像保持器设置为 25%，将内容设置为 75%，或者如果您知道为整个内容区域（图片和内容）分配了多少空间，则从中减去 100 并使用那么多像素。但总的来说这应该有效

#wrapForCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -240px;
    width: 480px;
    height: 320px;
    border: 1px solid black;
}

#title {        
    width: 100%;
    height: 40px;
    background-color: Blue;
}

#contentFrame {
    height: 240px;
    width: 480px;
}

#imagePlaceholder {
    float: left;
    width: 25%;    /* See Here */
    height: 100%;
    background-color: Green;
}
#content {
    float:right;
    width: 75%;  /* And here */
    height: 100%;
    background-color:Yellow;
  }