如何让我的中心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不是？

回答

相关问题