如何在CSS中使用这样的列？ （图片）

Question

有人可以告诉我如何在CSS中完成此操作？

修改

这三列将包含文字。我需要将黑匣子固定在尺寸上，并根据需要扩展两个紫红色柱子。 由于黑盒子，文本不应该隐藏在左右两边。我需要将它从两侧包裹在黑盒子周围。

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

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