Question

我不知道如何解释，但画出了我需要的CSS对齐图片。模板具有固定宽度，绿色区域代表主要内容，蓝色分区提供该页面的标题。

绿色div具有以下css：

#content {
  width: 980px;
  margin: 0 auto;
}

这适用于绿色框，但我不知道如何制作蓝色部分。 div需要覆盖页面的右侧+绿色区域的整个宽度，如下图所示。

请记住，用户可以调整窗口大小，以便无法修复蓝色位的宽度！

如何使用纯CSS实现？

http://img15.imageshack.us/img15/3884/cssalign.png

Answer 1

就像图片一样！

Css：

#title{
   position:relative;
   width:50%;
   margin:50px 0 50px 50%;
   background:blue;
   padding:25px 245px;
   left:-490px;
}
#content{
     width:980px;
     height:600px; /* for it to work with no content */
     margin:0 auto;
     background:green;
}

Html：

<div id="title"></div>
<div id="content"></div>

DEMO ：http://jsfiddle.net/sparkup/jL10axxv/

Answer 2

基本轮廓：给他们两个相同的left位置，给你想要的任何固定宽度的绿色，并给出蓝色的right: 0。

半页+ CSS对齐

2 个答案: