html - 页面内容布局问题

Question

可能重复：
使右侧的 Div 填充所有可用空间

我正在为博客设计一个主题，但在尝试使布局正常工作时遇到了一些麻烦。这是我想要的图像。

该图代表的是单个帖子，而不是网站本身，因此它将包含在它自己的盒子中，我们称之为.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可以有一个设定的高度
• .green是肉在哪里，那是实际帖子所在的地方，请记住这一点。
• 我不认为桌子会有帮助，问题在里面.content.

Answer 1

使用这篇文章中的答案来获得解决方案：

使右侧的 Div 填充所有可用空间

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

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

您可能还需要<br clear="all" />在绿色之后div和 div 关闭之前立即添加，然后在contentdiv 之后添加另一个content。

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