Html 页面内容布局问题

可能重复：

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

此图表示单个帖子，而不是网站本身，因此它将包含在自己的一个框中，我们称之为

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

这就是目前的全部情况。我尝试了浮动，但没有效果。发生的事情是这样的

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

• .container

  的宽度未设置，而是自动设置的

• .purple

  和

  .green

  不一定需要相同的大小，只要

  .green

  不在那一边

• .purple

  可以设置高度

• .green

  是肉的所在，这是实际帖子的所在，请记住这一点
• 我不认为表格会有帮助，问题出在

  .content.

---

我假设您的所有部分都是

元素。使用：

.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

之后和

内容
div关闭之前立即添加

，并在
内容
div之后添加另一个
。
使用本文中的答案获得解决方案：


我建议使用表定向一，因为它是几乎所有浏览器上最有效/最有效的方法。
假设所有内容都设置在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;
}

你能包括你想要支持的浏览器吗？这会有帮助吗？@360flow Michael Sweet baby jesus，是的，谢谢你，回答一下，我会选择：）。我不经常使用表格，我一直认为单元格必须等宽，或者我想到的是行。我从紫色中取出
float:left
，并使
变成绿色
和
。紫色
显示：block
。但问题是
.green
仍然是100%宽度。我想我可以向左拉一个
边距：125px
机动。