设置宽度为最宽的元素,同时仍然有浮动
Set width to widest element while still having floats
所以我有一个带按钮的容器的边栏,在第一行有一个元素浮动在左边,一个元素浮动在右边。下面是不同长度的按钮,每行一个按钮。所有的东西都在容器里。我怎样才能使所有的按钮和容器都是最宽的按钮的长度?向右浮动元素使容器与侧边栏一样宽,这应该是最大宽度,而不是默认宽度。我可以接受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>
设置#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>
Inline-block
* {
-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>
在你的css代码中添加这一行
#container {display: inline-block;}
相关文章:
- 使用 JavaScript 一次为一个元素设置多个属性
- 为dropdownlistfor(MVC)中的每个元素设置唯一id
- 无法为HTML5中具有画布和图像的可拖动元素设置“拖动图像”
- Jquery为每个元素设置属性
- 在JSON数组中进行迭代,并为其元素设置样式
- 将jquery ui窗口的父元素设置为另一个元素
- 如何使用随机css id为元素设置样式
- 如何为所有子元素设置填充
- Javascript:为元素设置适当的事件处理程序
- 为已设置动画的元素设置动画
- 将HTML元素设置为可滚动
- jQuery:从 JSON 对象为元素设置值
- 如何为 HTML 中的多个元素设置相同的 ID
- 为动态创建的元素设置属性
- 同时为一个 Li 元素设置类“活动”
- 如何使用 javascript 为元素设置内联 css 样式
- 如何为动态添加的 html 元素设置 setCustomValidity()
- 为包含 HTML 标记的字符串中的元素设置 Style 属性
- 获取两个元素的高度,将另一个元素设置为该高度
- 为表单元素设置 Cookie