Question

我正在尝试布置标题。它的左右两侧有前后箭头，中间有一个标题。当标题太宽时，我希望它出现在箭头下方......不确定如何做到这一点！我试着用flex-box搞砸了，但我不是那么棒。

视觉：

              <     Title     >

变成：

              <               >
              Super Wide Title!

这是一个codepen：http://codepen.io/wulftone/pen/KHkud

这甚至可能吗？

Answer 1

那最终比我想象的要容易。

这是HTML（苗条）：

ul
  li.one 1
  li.three 3
  li.two Super Long Title!

CSS（sass）：

ul
  padding: 0
  margin: 0
  color: white
  font-weight: bold
  font-size: 3em
  text-align: center
  list-style: none

li
  background: tomato
  padding: 5px
  width: 200px
  height: 150px
  line-height: 150px

.three
  float: right

.one
  float: left

li.two
  width: auto
  display: inline-block

http://codepen.io/wulftone/pen/GbLHI

好老花车再次救了一天！我希望这有助于其他人。

Answer 2

如果您不介意重新排序html并使用一些浮点数，那么您可以在没有flexbox的情况下执行此操作。这是a codepen showing that。它使用这种结构：

<强> HTML

<ul>
  <li class="one">1</li>
  <li class="three">3</li>
  <li class="two">2</li>
</ul>

关键CSS

这只是获得中心下拉所需功能的关键css。

ul {
  text-align: center;
}

li {
  display: inline-block;
}

.one {
  float: left;
}

.three {
  float: right;
}

CSS：当列太宽时，三列中心列向下移动

2 个答案: