使用 CSS / CSS3 自动调整所有元素的高度(使高度相等)
我有一个内联显示的导航项目的无序列表,每个项目都共享相同的容器宽度(即 320px)。
我面临的问题是,由于宽度有限,文本可能会超出两行。但是,如果一个导航项比其他项高,是否可以使所有导航项超链接的高度相同?
背景颜色应用于超链接,因为当内容处于活动状态时它需要处于活动状态。
这是我的小提琴: http://jsfiddle.net/calebo/W7sYZ/1/
I have an unordered list of navigation items that are displayed inline, each of these item share the same equal width of the container (ie. 320px).
The issue I'm facing is there is a potential that the text might runover two lines because of the limited width. But is it possible to make all navigation items hyperlink the same height should one be taller than the others?
The background color is applied to the hyperlink because it needs an active state when content is active.
Heres my fiddle: http://jsfiddle.net/calebo/W7sYZ/1/
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(4)
.module-controls { display: table; }
.module-controls .tab-set { display: table-row; }
不带 JS 的多浏览器变体: http://matthewjamestaylor.com/博客/等高列-跨浏览器-css-no-hacks
这里我得到了使用flex方法等高div的解决方案。
<div class="card-row">
<div class="card">
<div class="card-content">
<p>Sample content</p>
</div>
<a href="#" class="button">button</a>
</div>
<div class="card">
<div class="card-content">
<p>Sample content</p>
<p>Sample content two</p>
<p>Sample content three</p>
<p>Sample content two</p>
</div>
<a href="#" class="button">button</a>
</div>
<div class="card">
<div class="card-content">
<p>Sample content</p>
<p>Sample content two</p>
</div>
<a href="#" class="button">button</a>
</div>
//CSS
.card {
background: red;
flex: 1;
margin: 0px 15px;
padding: 15px;
display: flex;
flex-direction: column;
}
.card-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: #f5f5f5;
padding: 40px 0px;
width: 100%;
}
.card-content {
background: #fff;
flex: 1;
margin-bottom: 20px;
}
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
http://jsfiddle.net/W7sYZ/2/
http://jsfiddle.net/W7sYZ/2/