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

我想创建一个就像从iphone一个标题栏的布局： enter image description here 有div填充剩余宽度 - 模仿标题栏？

我试图整理出以下例子，但我不知道怎么去中间列的宽度扩大，从而它使用所有剩下的空间。我可以在运行时在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>

谢谢

来源

2012-12-14 user291701

使用较小的图片下一次，请。 – bobthyasian

你看过http://iphone.hohli.com/吗？ – Trufa

什么是您的浏览器支持需求？ flex-box应该这样做... – joholo

一个更简单的处理这个办法是使用HTML的结构是这样的：

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

浮动左右的div到相应的侧面和将父级上的文本对齐设置为居中。来自中间div的任何样式可用于文本等。

来源

2012-12-14 23:56:32

好吧，我认为这将符合我的需求，谢谢。 – user291701

嘿downvoter - 谨慎解释为什么？ –

-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-14 23:56:36 bobthyasian

请修改您的代码。它不像你想象的那样工作。 –

我有点晚了答案，但看这更像是你需要什么，而无需牺牲中间<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-15 00:28:41

巧妙，+1！ – Trufa

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

回答

相关问题