Question

我需要在CSS中进行布局，有点像这样。

绿色＆amp;红色分别是左右两角。如何使黄色区域占据其间的所有空间，并将文本（屏幕截图中的“登录”）对齐为中心。

我也尝试过Twitter-Bootstrap。 col-md-1，左拉等并没有达到我的预期。任何帮助表示赞赏。

screenshot

这是我的工作代码（没有任何Bootstrap）

<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>

Answer 1

您可以使用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/

Answer 2

您可以使用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;
    }

占据2个角落元素之间的整个宽度

2 个答案: