Question

早上好，

我试图在一个宽度为90％的居中容器div内创建一个居中的3列布局（h1，h2，h3）。

h1和h3是我的背景图像宽度的固定宽度b / c，h2应该是空间剩余部分的100％。我能够使用指定的宽度进行此工作，但我想避免这种情况，以防用户想要查看页面＆lt; 800像素。

css：



    #home-container {
      background-image:url('/images/bg.png');
      background-repeat: repeat-x;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      width: 800px;
    }

    #h1 {
      background-image:url('/images/navbar_left.png');
      background-repeat: no-repeat;
      width: 27px;
    }

    #h2 {
      background-image:url('/images/navspacer.png');
      background-position: center top;
      background-repeat: repeat-x;
      width:746px;
    }

    #h3 {
      background-image:url('/images/navbar_right.png');
      background-position: right top;
      background-repeat: no-repeat;
      width: 27px;
    }

    #h1, #h2, #h3 {
      float:left;
    }

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>3col test</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css" media="all" />
  </head>
  <body>
      <div id="home-container">
        <div id="h1">1</div>
        <div id="h2">2</div>
        <div id="h3">3</div>
      </div>
  </body>
</html>

Answer 1

可能有更简单的答案，但这是一种方法：

工作解决方案：http://jsfiddle.net/W8Bwe/1/

基本上，将h1和h3嵌入h2中，分别左右浮动。

然后只需在h2上设置边距，以考虑h1和h3占用的空间。

使用百分比在一个居中的div内部3个div

1 个答案: