如何讓我的中心div的寬度充分利用所有可用空間，當左邊的div有固定的寬度，右邊的div不是？

我有以下情況，我的左DIV包含我的徽標，它具有固定的寬度。我的右側DIV包含我的菜單，它沒有固定的寬度。最後，我的中心DIV包含一個搜索字段。如何讓我的中心div的寬度充分利用所有可用空間，當左邊的div有固定的寬度，右邊的div不是？

我希望我的中心DIV使用左側的所有水平空間，而右側DIV的寬度儘可能小，所以基本上要有菜單的寬度。但是因爲菜單項可以改變，所以我不能爲右邊的DIV設置一個固定的寬度。

有沒有一個很好的CSS解決方案呢？

| ---徽標--- | | ---搜索欄--- | | ---菜單項--- |

<div id="container"> 
    <h1 id="logo"> 
     <img src="logo.svg" alt="Logo"> 
    </h1> 

    <div id="search"> 
     <input type="text" name="search"> 
    </div> 

    <div id="menu"> 
     <a href="#">Home</a> 
     <a href="#">Blog</a> 
     <a href="#">Users</a> 
     <a href="#">About Us</a> 
    </div> 
</div>

來源

2015-07-02 WG92

有幾個，但你至少應該告訴我們你在解決這個付出多少努力** **自己喜歡 –

http://jsfiddle.net/b2g8j8ok/1 /？ – ketan

使用flex-box

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    margin: 10px auto; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: space-between; 
 
    border: 1px solid grey; 
 
} 
 
.logo img { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container > * { 
 
    flex: 0 1 auto 
 
} 
 
.logo { 
 
    flex-grow: 0; 
 
    background: red; 
 
    margin: 0; 
 
} 
 
.search { 
 
    background: lightblue; 
 
    text-align: center; 
 
    align-items: center; 
 
    display: flex; 
 
    flex-grow: 1; 
 
    padding: 10px; 
 
} 
 
.search input { 
 
    width: 100%; 
 
} 
 
.menu { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    text-align: center; 
 
} 
 
.menu a { 
 
    flex: ; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    background: orange; 
 
}

<div class="container"> 
 
    <h1 class="logo"> 
 
     <img src="http://lorempixel.com/output/city-q-c-200-150-8.jpg" alt="Logo"> 
 
    </h1> 
 

 
    <div class="search"> 
 
    <input type="text" name="search"> 
 
    </div> 
 

 
    <div class="menu"> 
 
    <a href="#">Home</a> 
 
    <a href="#">Blog</a> 
 
    <a href="#">Users</a> 
 
    <a href="#">About Us</a> 
 
    </div> 
 
</div>

FlexBox - Codepen Demo

來源

2015-07-02 12:31:17

我你不想使用Flexbox的（由於兼容性或其他原因），你可以試試顯示屬性和表格單元值：

.row { 
    display: table-row; 
} 
.left { 
    display: table-cell; 
    width: 100px; 
} 
.center, right { 
    display: table-cell; 
}

和HTML

<div class="row"> 
    <div class="left"></div> 
    <div class="center"></div> 
    <div class="right"></div> 
</div>

來源

2015-07-02 12:54:10

如何讓我的中心div的寬度充分利用所有可用空間，當左邊的div有固定的寬度，右邊的div不是？

回答

相關問題