Question

所以，正确到位，这就是我想要的（减去质量差）...

http://www.hbperspective.com/alt3/site.jpg

这就是我所拥有的......

http://www.hbperspective.com/alt3/

我正试图让这两个透明列在图片中居中。有了这个CSS布局，我有点时间弄清楚如何做到这一点而不会引起各种其他问题。这是我的造型......

* {
    padding: 0;
    margin: 0;
}

body {
    background: #000000 url('background_div.png') repeat-y center top;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0 auto;
}

#wrapper {
    background: url('background_header_transparent.png') no-repeat center top;
    width: 100%;
    display: table;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.container {
    float: left;
    position: relative;
    margin-top: 100px;
}

.content {
    position: relative;
    float: left;
}

#contentColumn{
    width: 540px;
}

#sidebarColumn {
    width: 190px;
    margin-left: 20px;
    float: left;
    display: inline;
}

#contentColumn .content {
    width: 500px;
    padding: 10px;
}

#sidebarColumn .content {
    width: 170px;
    padding: 10px;
}

* html #contentColumn .overlay { height: expression(document.getElementById("contentColumn").offsetHeight); }
* html #sidebarColumn .overlay { height: expression(document.getElementById("sidebarColumn").offsetHeight); }

标记非常简单，可能只是从提供的链接中查看它更容易。所以，就像我说的那样，我不知道该怎么做才能让它以我想要的方式运作。有什么想法吗？

Answer 1

div#container {
  width:500px; /* Same width as both columns */
  margin:auto; /* Will center the container */
}
  div#col1 {
    float:left; /* allows side-by-side columns */
    width:250px;
  }
  div#col2 {
    float:left;
    width:250px;
  }
div.clear {
  clear:both; /* Stops columns from extending past border of container */
}

<div id="container">
  <div id="col1"></div>
  <div id="col2"></div>
  <div class="clear"></div>
</div>

为了额外的功劳，请避免使用表达式:)相反，通过jQuery等框架，使用javascript执行任何所需的逻辑。

Answer 2

有很多陷阱创建CSS列我建议使用框架而不是自己编辑。有许多问题是浏览器被告，你可能看不到，除非你检查IE，FF，Safari，Opera等。

一些好的框架是：

Answer 3

CSS中心事物的规则：

必须为您居中的东西指定宽度
必须将该块上的边距指定为自动

Answer 4

我使用

在FF3和IE7上使用它

div#wrapper { 
    width:800px; 
    margin: auto; 
}
div#contentColumn 
{ 
    margin-left: 20px;
}

如果你想修复徽标（见右上角），然后在包装内立即添加一个额外的容器div，并将上述宽度/边距应用于容器（如Jonathan Sampson所建议的那样。）

使用CSS将两个透明列居中

4 个答案: