CSS浮动像素和混合百分比

好的，我想要这个：

为此，我有以下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;
}

#wrapForCenter
{
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-160px；
左边距：-240px；
宽度：480px；
高度：320px；
边框：1px纯黑；
}
#头衔
{        
宽度：100%；
高度：40px；
背景颜色：蓝色；
}
#内容框架
{
高度：240px；
宽度：480px；
}
#图像占位符
{
浮动：左；
宽度：100px；
身高：100%；
背景颜色：绿色；
}
#内容
{
浮动：左；
宽度：380px；/*这称为浮子下降。浮子的工作原理是，只要每个浮子都有足够的空间，就可以并排安装，但如果没有足够的空间安装，则浮子会在前一个浮子的下方碰撞

width:100%
意味着将其宽度设为其容器的100%（#wrapForCenter）。当然，如果你告诉某个东西是其容器的整个宽度，那么容器内的任何一侧都无法容纳任何东西，因此作为一个浮子，它必须向下移动到其前面的任何位置（早期的“同级”）您应该将图像保持架设置为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;
  }

我以前在stackoverflow中也问过类似的问题


您可以设置HTMLlike

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

#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中进行搜索