如何在 CSS 中拥有这样的列？（图片）答案

【问题标题】：How can I have columns like this in CSS? (image)如何在 CSS 中拥有这样的列？（图片）
【发布时间】：2011-03-04 10:48:38
【问题描述】：

有人可以告诉我如何在 CSS 中完成这项工作吗？

编辑

三列将包含文本。我需要固定黑匣子的大小，并根据需要扩展两个紫红色的列。 当然，文本不应该因为黑框而隐藏在左右一个中。我需要将它从两侧包裹在黑框上。

【问题讨论】：

您需要提供更多详细信息。例如，每列在其包含的内容量方面应该如何表现？
真的有很多方法，取决于你是否想要图像结果、css + 图像结果、css + 浏览器特定结果等......你有什么要求？
我编辑了这篇文章，提供了更多细节。谢谢。
@emurad - 哇，这是一些编辑。
看到这个ALA article。

标签： html css css-float

【解决方案1】：

这样的事情怎么样？

http://jsfiddle.net/ffb55/2/

圆角可以在非IE浏览器中使用，如果您想要在IE中使用圆角，请按照以下示例：http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

HTML

<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

CSS

#left {
 float:left;   
 width:50px;
 height:100px;
 background-color:pink;
}

#right {
 float:left;   
 margin-left: 10px;
 left: 100px;
 width:50px;
 height:100px;
 background-color:pink;
}

#center {
  position:absolute;
  left:40px;
  top: 20px;
  width:50px;
  height:50px;
  background-color:black;

}

#left, #right, #center {
 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

【讨论】：

给我看一些圆角，我会支持你。另外，也将您的代码发布在 SO 上。

【解决方案2】：

这是您的图片的 CSS 表示，但不知道预期的初始比例以及您希望内容如何在这些列中重排，此 CSS 对您没有太大帮助。

现场演示：http://jsfiddle.net/Marcel/PMY7S/2/

HTML：

<div id="wrap">
    <div class="col lft"></div>
    <div class="col"></div>
    <div class="col top"></div>
</div>

CSS：

div { border-radius:1em; }
.col { float:right; width:45%; height:30em; background:#ff3ca0; }
.lft { margin:0 0 0 10%; }
.top { top:5em; left:-5em; width:10em; height:15em; margin:0 0 0 50%; background:#333; position:absolute; }
#wrap { width:20em; margin:1em auto; }

【讨论】：