你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!

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

有人可以告诉我如何在CSS中完成这项工作？编辑这三列将包含文本。我需要将黑匣子固定在尺寸上，并根据需要扩展两个紫红色柱子。因为黑盒子，文本不应该隐藏在左边和右边的文本中。我需要将它从两侧包裹在黑匣子周围。

已邀请:

2 个回复

这样的事怎么样？ 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;
}

埃庐

这是您的图像的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; }

要回复问题请先登录或注册

发起人

问题状态

最新活动: 2019-10-10 22:28
浏览: 154
关注: 90 人

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

与内容相关的链接

2 个回复

发起人

问题状态

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