对齐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

您可以将第二个箭头放在第一个箭头之后（在您的HTML中），然后将标题左移。

<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彼此相邻（问题）

回答

相关问题