页面内容布局问题

Question

可能重复：
Make Div on right side fill out all available space

我设计一个博客主题，我遇到了一些麻烦试图让布局工作。这是我想要的图像。

这个图代表的个别职位，而不是网站本身，所以它会被包含在它自己的盒子，让我们把它叫做.container。另外紫色和绿色在另一个盒子里，我们称之为.content。其他元素现在将被调用它们的颜色。

所以这里的或多或少的CSS的样子：

.container { 
    display:block; 
    margin:0 25px; 
} 

.gray, .blue, .content { 
    display:block; 
    width:100%; 
} 

.purple { 
    display:inline-block; 
    width:125px; 
    height:100%; 
    text-align:center; 
} 

.green { 
    display:inline-block; 
} 

这就是所有的时刻。我试过float但这没有效果。发生的事情是这样的。

这里有一些事情你应该知道：

• .container的宽度不是设置为自动
• .purple和.green不一定需要是相同的大小只要.green不去那边。
• .purple CAN有一个设定的高度
• .green是肉的地方，这是实际文章去的地方，牢记这一点。
• 我不认为表将帮助下，问题是里面.content.

Answer 1

在这篇文章中使用的答案得到一个解决方案：

Make Div on right side fill out all available space

我推荐表导向的一个，因为它是最有效的/工作方法，几乎​​所有的浏览器上。

Answer 2

我假设你所有的部分都<div>元素。用途：

.container { 
    display:block; 
    margin:0 25px; 
} 

.gray, .blue, .content { 
    display:block; 
    clear:both; 
    width:100%; 
} 

.purple { 
    float:left; 
    width:125px; 
    height:100%; 
    text-align:center; 
} 

.green { 
    float:left; 
} 

您可能还需要绿色div后和content div的结束，和你的content DIV之后才能再次立即添加<br clear="all" />。

Answer 3

假设所有被设定在你需要写这样的div：

.container { 
    display:block; 
    margin:0 25px; 
} 

.gray, .blue, .content { 
    display:block; 
    clear:both; 
    width:100%; 
} 

.purple { 
    float:left; 
    width:125px; 
    height:100%; 
    text-align:center; 
} 

.green { 
    float:left; 
    min-width: 125px; 
}