CSS : 너비가 너무 커서 가운데 ​​열이 아래로 이동하는 세 개의 열

Question

머리글을 배치하려고합니다. 그것은 왼쪽과 오른쪽에있는 앞뒤 화살표와 중간에있는 제목을 가지고 있습니다. 제목이 너무 넓 으면 화살표 아래에 표시하고 싶습니다 ... 어떻게하는지 잘 모릅니다! 나는 플렉스 박스로 어지럽 혔다. 그러나 나는 그다지 훌륭하지 않다. 비주얼

:

   <  Title  > 

가로 바뀝니다 : http://codepen.io/wulftone/pen/KHkud

이도 가능 :

여기

   <    > 
       Super Wide Title! 

가 codepen입니까?

Answer 1

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; 
} 

Answer 2

글쎄, 내가 생각했던 것보다 쉬워졌다.

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

그리고 CSS (말대꾸) :

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

좋은 오래된 수레가 다시 일을 저장

은 여기 (슬림) HTML입니다! 나는 이것이 다른 누군가를 돕기를 바랍니다.