Question

好的，我想要这个：

Correct layout centered on browser window.

为此，我有这个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％，为什么会出现这种情况？

Contents get 100% with of its container but it not respect image width

我认为内容宽度是contentFrame减去imagePlacehoder宽度（以像素为单位），但是当我指定float：left for two，imagePlacehoder和content时，内容将获得其父容器宽度。为什么呢？

是否有另一种方法可以在不使用float的情况下获得相同的结果（可能是display：inline）？并使用宽度：100％的内容？

非常感谢你。 CSS不是我的实力。

Answer 1

这称为浮动下降。浮子的工作方式使得只要每个都有足够的空间，它们就会并排放置，但如果没有足够的空间可以放置浮子，那么浮子会在前一个下方撞击。

width:100%表示将其宽度设置为其容器（#wrapForCenter）的100％。当然，如果你告诉某个东西是它的容器的整个宽度，那么任何东西都不能放在那个容器内的任何一侧，所以作为一个浮动它必须向下移动到它之前的任何东西（早先的“兄弟姐妹“）以适应。

Answer 2

我之前在stackoverflow中问过类似的问题。

How to auto adjust (stretch) div height and width using jQuery or CSS

您可以设置 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
}

Here 是工作演示。

希望这会有所帮助..

注意：我建议（不要强迫）你在提问之前在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;
  }

CSS浮动像素和百分比混合

3 个答案: