我有一个标题/徽标，左右两边都有 div 块：
.wrap .title-area {
position: absolute;
top: 0;
width: 100%
}<div class="wrap">
<div class="header-left-box">
<p>abcd-left box</p>
</div>
<div class="title-area">
<p>abcd-header</p>
</div>
<div class="header-right-box">
<p>abcd right box</p>
</div>
</div>我用 30%、40%、30% 的宽度设计了它，每个都有 float:left 来给出我需要的结果。在缩小的屏幕尺寸上，我给每个 div 框 100% 的宽度，以便它们堆叠。但是因为我想要顶部的徽标框，所以我给出了样式。
这将标题带到顶部，但标题左框也位于标题下方的顶部。如何在不重叠的情况下根据需要安排它们？