Question

我试图让三个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;
}

我希望有人可以帮助我......我也尝试将它们全部放在同一个方向，但这对我没用。

谢谢！

Answer 1

您可以将第二个箭头放在第一个箭头之后（在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/

对齐3个div彼此相邻（问题）

1 个答案: