将宽度设置为最宽的元素，同时仍然具有浮动

Question

所以我有一个带有按钮的容器的侧边栏，在第一行有一个向左浮动的元素和一个向右浮动的元素。它们下面是各种长度的按钮，每行一个按钮。一切都在容器中。我怎样才能使所有按钮和容器都是最宽按钮的长度？向右浮动元素使容器与侧边栏一样宽，应该是最大宽度，而不是默认宽度。我可以接受JavaScript和CSS的答案。

以下是我迄今为止所做的事情：https://jsfiddle.net/ke2b7wq1/

的CSS：

#sidebar{
width: 250px;
height: 100%;
border: 1px solid #000;
}
#left-float{
padding: 0 5px;
background: #F00;
float: left;
}
#right-float{
padding: 0 5px;
background: #F00;
float: right;
}
.button{
text-align: center;
background: #BBB;
clear: both;
float: left;
margin-top: 7px;
width: 100%;
}
.pusher{
clear: both;
height: 0;
}

HTML：

<div id="sidebar">
<div id="container">
    <div id="left-float">hello</div>
    <div id="right-float">0</div>
    <div class="button">lorem ipsum</div>
    <div class="button">dolor sit amet</div>
    <div class="button">foo bar foo bar</div>
    <div class="button">lorizzle ipizzle</div>
    <div class="button">final button</div>
    <div class="pusher"></div>
</div>
</div>

Answer 1

在你的小提琴css代码中添加这一行

#container {display: inline-block;}

Answer 2

将#container设置为display:inline-block或float:left（不要忘记清除花车）。

<强>抹灰

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#sidebar {
  width: 250px;
  height: 100%;
  border: 1px solid #000;
  overflow: hidden;
}
#container {
  float: left;
}
#left-float {
  padding: 0 5px;
  background: #F00;
  float: left;
}
#right-float {
  padding: 0 5px;
  background: #F00;
  float: right;
}
.button {
  text-align: center;
  background: #BBB;
  clear: both;
  float: left;
  margin-top: 7px;
  width: 100%;
  padding: 4px;
}
.pusher {
  clear: both;
  height: 0;
}

<div id="sidebar">
  <div id="container">
    <div id="left-float">hello</div>
    <div id="right-float">0</div>
    <div class="button">lorem ipsum</div>
    <div class="button">dolor sit amet</div>
    <div class="button">foo bar foo bar</div>
    <div class="button">lorizzle ipizzle</div>
    <div class="button">final button</div>
    <div class="pusher"></div>
  </div>
</div>

<强>内联块

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#sidebar{
    width: 250px;
    height: 100%;
    border: 1px solid #000;

}

#container {
    display:inline-block;
}
#left-float{
    padding: 0 5px;
    background: #F00;
    float: left;
}
#right-float{
    padding: 0 5px;
    background: #F00;
    float: right;
}
.button{
    text-align: center;
    background: #BBB;
    clear: both;
    float: left;
    margin-top: 7px;
    width: 100%;
    padding:4px;
}
.pusher{
    clear: both;
    height: 0;
}

<div id="sidebar">
    <div id="container">
        <div id="left-float">hello</div>
        <div id="right-float">0</div>
        <div class="button">lorem ipsum</div>
        <div class="button">dolor sit amet</div>
        <div class="button">foo bar foo bar</div>
        <div class="button">lorizzle ipizzle</div>
        <div class="button">final button</div>
        <div class="pusher"></div>
    </div>
</div>