居中 div 环绕（当它不适合在线时）

Question

我正在尝试仅使用 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.

Fiddle 这里：http://jsfiddle.net/b7rvhwqg/

Answer 1

如果标题正好适合您想要的宽度，您觉得合适吗？...例如：

{徽标}标题太长了{btn}

会变成这样：

{Logo}标题太...{btn}

会被剪掉，然后只有“……”会继续

Answer 2

.container {
    width: 100%;
    border: 1px solid grey;
    padding: 5px;
}
.block {
    padding: 5px;
    border: 1px solid orange;
    float: left;
}
.ellipsis{
    text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;    width: 75%;
}
.right-block {
    float: right;
}

<div class="container">
    <div class="block">Logo</div>
    <div class="block ellipsis">Title that is too long Title that is too long Title that is too long that is too long Title that is too long</div>
    <div class="block right-block">right-btn</div>
    <div style="clear: both"></div>
</div>

jsFiddle

Answer 3

通过 Pure CSS 实现此目的存在问题。 div 已经有一个浮动，你想要一个 "long title" 来容纳那个浮动，同时，你希望另一个右边的浮动跳跃并成为中心。目前这是不可能的。我相信，您需要考虑媒体查询，但同样，这将是一个依赖解决方案，但您的标题看起来独立于 expanding/contracting。

Answer 4

Flexbox 最适合这个任务：

<div class="container">
    <div class="block logo">Logo</div>
    <div class="block title">Title that is too long Title that is too long</div>
    <div class="block right-block">right-btn</div>
    <div style="clear: both"></div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%
    border: 1px solid grey;
}
.block.logo {
    flex-grow: 1;
    border: 1px solid orange;
}
.block.title{
    flex-grow: 10;
    border: 1px solid orange;
}
.right-block {
    flex-grow: 1;
    border: 1px solid orange; 
    text-align: center;
}

http://jsfiddle.net/gmrash/7b8w982t/

Answer 5

使用 flexbox 布局的纯 CSS 解决方案：

Updated Example Here

诀窍是将 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>

居中 div 环绕（当它不适合在线时）

Center div on wrapping (when it doesn't fit on the line)

html

css

word-wrap

centering

使用 flexbox 布局的纯 CSS 解决方案：