2

我想创建一个类似于 iphone 标题栏的布局： 在此处输入图像描述

我尝试将以下示例放在一起，但我不确定如何让中间列扩大宽度，以便使用所有剩余空间。我可以在运行时在 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>

谢谢

4

3 回答 3

1

解决此问题的更简单方法是使用如下 HTML 结构：

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

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

于 2012-12-14T23:56:32.520 回答
1

我的答案有点晚了，但看看这是否更像你需要的，而不需要牺牲中间<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>
于 2012-12-15T00:28:41.527 回答
-1

您需要定义宽度...

    #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自动。

于 2012-12-14T23:56:36.047 回答