有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填充剩餘寬度 - 模仿標題欄？

回答

相關問題