佔據2個角色元素之間的整個寬度

綠色&紅色在左右角分別爲2個方格。我如何讓黃色區域佔據兩個區域之間的所有空間，並且也將居中的（'Login'，屏幕截圖中的）文本對齊。

另外我也嘗試了一些與Twitter-Bootstrap的東西。 col-md-1，左拉等沒有完全達到我的目的。任何幫助表示讚賞。

screenshot

這是我工作的代碼（不加任何引導）

<head> 
<style> 
    #myContainer{ 
     background-color: silver; 
     overflow: hidden; 
     height: 50px; 
     width:100%; 
    } 

    #leftLogo{ 
     width:40px; 
     height:40px; 
     background-color: green; 
     float:left; 
    } 

    #rightLogo{ 
     width:40px; 
     height:40px; 
     background-color: red; 
     float:right; 
    } 

    #labelText{ 
     height:40px; 
     float:left; 
     width:100%-80px; 
     background-color: #f3ff11; 
    } 
</style> 
</head> 

<body> 
<div id="myContainer"> 
    <span id="leftLogo"></span> 
    <center> 
    <span id="labelText"><H2>Login</H2>></span> 
    </center> 
    <span id="rightLogo"></span> 
</div>

來源

2013-12-18 user2443329

您可以使用position:absolute;與position:relative和width:100%;定位的包裝內的顏色的方塊

FIDDLE

HTML：

<div id="myContainer"> 
    <div id="labelText"> 
     <span id="leftLogo"></span> 
     <H2>Login</H2> 
     <span id="rightLogo"></span> 
    </div> 
</div>

CSS：

#myContainer{ 
     background-color: silver; 
     overflow: hidden; 
     height: 50px; 
     width:100%; 
    } 

    #leftLogo{ 
     width:40px; 
     height:40px; 
     background-color: green; 
     position:absolute; 
     top:0; 
     left:0; 
    } 

    #rightLogo{ 
     width:40px; 
     height:40px; 
     background-color: red; 
     position:absolute; 
     top:0; 
     right:0; 
    } 

    #labelText{ 
     height:40px; 
     width:100%;  
     background-color: #f3ff11; 
     position:relative; 
     text-align:center; 
    } 
    h2{ 
     line-height:40px; 
     margin:0; 
     padding:0; 
    }

來源

2013-12-18 17:30:59

您可以使用display:table和display:table-cell實現這一目標。

首先解決您的標記：

<div id="myContainer"> 
    <span id="leftLogo"></span> 
    <span id="labelText"><h2>Login</h2></span> 
    <span id="rightLogo"></span> 
</div>

然後你的CSS：

div, span, h2 { 
    margin:0; 
    padding:0;  
}  
#myContainer { 
    background-color: silver; 
    overflow: hidden; 
    height: 50px; 
    width:100%; 
    display:table; 
}  
#leftLogo, #rightLogo, #labelText { 
    display:table-cell; 
    height:40px; 
} 
#leftLogo, #rightLogo { 
    width:40px; 
} 
#leftLogo { 
    background-color: green; 
}  
#rightLogo { 
    background-color: red;  
}  
#labelText { 
    text-align:center; 
    background-color: #f3ff11; 
}

演示：http://jsfiddle.net/TjGC3/

來源

2013-12-18 17:28:34 melancia

爲什麼人們似乎認爲顯示：表和表細胞比位置好：絕對？位置：如果瀏覽器更友好，絕對不是嗎？ –

這不是每一種你可以依賴定位的情況，所以這是另一種選擇。 – melancia

佔據2個角色元素之間的整個寬度

回答

相關問題