我正在尝试仅使用 CSS 创建此布局：
当标题合适时：
当标题不合适时：
右边的 btn 如果换行的话应该居中。
我试过这个：
.container {
width: 100%;
border: 1px solid grey;
padding: 5px;
}
.block {
padding: 5px;
border: 1px solid orange;
float: left;
}
.right-block {
float: right;
}
<div class="container">
<div class="block">Logo</div>
<div class="block">Title that is too long</div>
<div class="block right-block">right-btn</div>
<div style="clear: both"></div>
</div>
但显然，btn 换行后仍然在右侧。知道包裹时如何将其居中吗？我想避免使用 JavaScript。
在这里小提琴：http://jsfiddle.net/b7rvhwqg/ http://jsfiddle.net/b7rvhwqg/
使用 Flexbox 布局的纯 CSS 解决方案：
此处更新示例 http://jsfiddle.net/c7ufykd4/
诀窍是添加justify-content: center/flex-wrap: wrap给家长.container水平居中的元素。然后调整第一个元素的margin-right价值auto为了防止最后一个元素在同一行时居中。
（您可能需要调整浏览器的大小才能看到它如何调整）。
.container {
width: 100%;
border: 1px solid grey;
padding: 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-text {
display: flex;
margin-right: auto;
}
.block {
padding: 5px;
border: 1px solid orange;
}
.center-block {
white-space: nowrap;
margin-right: auto;
}
<div class="container">
<div class="logo-text">
<div class="block logo">Logo</div>
<div class="block text">This title is short.</div>
</div>
<div class="block right-block">right-btn</div>
</div>
<div class="container">
<div class="logo-text">
<div class="block logo">Logo</div>
<div class="block text">This title is slightly longer than the other one. This title is longer than the other one...</div>
</div>
<div class="block right-block">right-btn</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
