Question

我想创建一个类似iphone标题栏的布局： enter image description here

我试图将以下示例放在一起，但我不确定如何让中间列扩展宽度，以便它使用所有剩余空间。我可以在运行时在javascript中执行此操作，但想知道是否有css解决方案。这是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <style type="text/css">
        html, body {
          margin: 0px;
          padding: 0px;
        }

        #parent {
          background-color: #eee;
          width: 100%;
        }
        #colLeft {
          background-color: #ff8b8b;
          height: 48px;
          display: inline;
        }
        #colMiddle {
          background-color: #c9ffc3;
          height: 48px;
          display: inline;
          text-align: center;
        }
        #colRight {
          background-color: #c3d0ff;
          height: 48px;
          display: inline;
        }
      </style>

   </head>

   <body>

      <div id="parent" style="width:100%">
          <div id="colLeft">left</div>
          <div id="colMiddle">title</div>
          <div id="colRight">right</div>
      </div>

   </body>
</html>

谢谢

Answer 1

更简单的方法是使用这样的HTML结构：

<div id="parent" style="width:100%">
    <div id="colLeft">left</div>
    title
    <div id="colRight">right</div>
<div>

将左右div移动到适当的边，并将父对齐的文本对齐设置为居中。来自文本等的中间div的任何样式都可以应用于父级。

Answer 2

我的答案有点晚了，但看看这是否更像你需要的东西，而不需要牺牲中间<div>：

您必须浮动3列，并使内柱的宽度为100％。然后，设置内部列的边距（基于左右列的宽度），即可获得结果。

看看这个小提琴：http://jsfiddle.net/fabio_silva/d7SFJ/

HTML / CSS：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <style type="text/css">
        html, body {
          margin: 0px;
          padding: 0px;
        }

        #parent {
          background-color: #eee;
          width: 100%;
        }
        #colLeft {
          background-color: #ff8b8b;
          height: 48px;
          width: 100px;
          float: left;

        }
        #colMiddle {
          height: 48px;
          text-align: center;
          float: left;
          width: 100%;
          margin-left: -100px; /* negative colLeft width */
          margin-right: -150px; /* negative colRight width */
        }
            #colMiddleInner
            {
                margin-left: 100px;
                margin-right: 150px;
                height: 48px;
                background: #c9ffc3;
            }
        #colRight {
          background-color: #c3d0ff;
          height: 48px;
          width: 150px;
          float: left;
        }
      </style>

   </head>

   <body>
      <div id="parent" style="width:100%">
          <div id="colLeft">left</div>
          <div id="colMiddle">
            <div id="colMiddleInner">
              title
            </div>
          </div>
          <div id="colRight">right</div>
      </div>

   </body>
</html>

Answer 3

您需要定义宽度...

    #colLeft {
      background-color: #ff8b8b;
      height: 48px;
      width: 50px
      display: inline;
    }
    #colMiddle {
      background-color: #c9ffc3;
      height: 48px;
      display: inline;
      width: auto;
      text-align: center;
    }
    #colRight {
      background-color: #c3d0ff;
      height: 48px;
      width: 50px;
      display: inline;
    }

注意：width的默认值为自动。

div填充剩余宽度 - 模仿标题栏？

3 个答案: