서로 옆에 3 개의 div 정렬하기 (문제)

나는 서로 옆에 세 개의 div가 있습니다. 그 중 하나는 왼쪽의 화살표이고, 그 옆에있는 제목은 그 옆에 있습니다. 오른쪽 화살표. 가능한 모든 플로팅 조합을 시도했지만 작동시키지 못했습니다! 나도 같은 질문을 가진 다른 남자를 찾았지만 그건 나에게도 효과가 없었다. 이것은 내가 무엇을 :서로 옆에 3 개의 div 정렬하기 (문제)

HTML

<html> 

<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 


<body> 

<div class="holder"> 
    <div class="larrholder"> 
    <p class="arrow"><<</p> 
    </div> 

    <div class="titleholder"> 
    <h1 class="centered">News</h1> 
    </div> 

    <div class="rarrholder"> 
    <p class="arrow">>></p> 
    </div> 
</div> 

</body> 

</html>

CSS

* { 
margin: 0; 
padding: 0; 
} 

div.holder { 
margin: 0 auto; 
width: 506px; 
height: 50px; 
border: 1px solid black; 
} 

div.larrholder { 
float: left; 
width: 100px; 
height: 50px; 
border: 1px solid blue; 
} 

div.titleholder { 
width: 300px; 
height: 50px; 
border: 1px solid red; 
} 

div.rarrholder { 
float: right; 
width: 100px; 
height: 50px; 
border: 1px solid blue; 
} 

h1.centered { 
text-align: center; 
} 

p.arrow { 
text-align: center; 
}

내가 같은 방향으로 모두 부동 시도 ... 누군가가 나를 도울 수 있기를 바랍니다, 그러나 저를 위해 작동하지 않았다.

감사합니다.

출처

2014-01-26 YSbakker

첫 번째 화살표 다음에 두 번째 화살표를 놓고 제목을 왼쪽으로 떠올리게 할 수 있습니다.

<div class="holder"> 
<div class="larrholder"> 
    <p class="arrow"><<</p> 
</div> 

<div class="rarrholder"> 
    <p class="arrow">>></p> 
</div> 

<div class="titleholder"> 
    <h1 class="centered">News</h1> 
</div> 
</div>

예 : http://jsfiddle.net/x2kn2/

출처

2014-01-26 16:42:30 Adrift

와우, 감사합니다! 나는이 일이 너무 쉬울 것으로 기대하지 않았을 것이다 ... 나는 내가 이것에 대해 스스로 생각할 수 있었다고 생각한다. 지금은 좀 바보 같아. 음. 고마워! – YSbakker

서로 옆에 3 개의 div 정렬하기 (문제)

답변

관련 문제