CSS問題，有多個項目向左浮動，而一個項目向右浮動

Question

我在與本網頁的頁眉彩車的問題- http://test.debtfree.co.uk/ 。 我的標記如下：

<div class = "landline">
 <!--content-->
</div>
<div class="mobile">
 <!--content-->
</div>
<div class="times">
 <!--content-->              
</div>
<a class="callback">
 <!--content-->                        
</a>

我已經申請一個float:left規則.landline ， .mobile和.times我也appled一個float:right給.callback 。

問題是，當我從左側略微水平調整瀏覽器大小時， .callback （包含文本-“ Request We Call You”）將包裹在其他元素的下面，而我寧願它與向左浮動的元素位於行內。

但是，我發現，如果將.callback移到HTML片段的頂部，從而使其位於瀏覽器閱讀順序的頂部，則可以消除此問題。 但是，我相當確定使用瀏覽器閱讀順序來放置元素是不好的。 通過首先聲明.callback （並使其正確浮動），我告訴該元素首先正確浮動，但是肯定有更好的方法用CSS實現此功能嗎？

<a class="callback">
 <!--content-->                        
</a>
<div class = "landline">
 <!--content-->
</div>
<div class="mobile">
 <!--content-->
</div>
<div class="times">
 <!--content-->              
</div>

CSS：

.top-area .landline,.top-area .mobile {
float:left;
margin-right:30px;
}

.top-area .times {
color:#6289d8;
float:left;
}

.top-area .callback {
border:1px solid #888;
color:#36C;
display:block;
float:right;
font-weight:700;
text-align:right;
box-shadow:1px 1px 4px 2px #DDD;
padding:7px;
}

Answer 1

您可以：從.callback刪除float:right並添加：

position: absolute;
top: 30px;
right: 0;
width: 140px;

直到屏幕寬度大於1340px為止，它看起來都不錯，然后您可以根據媒體查詢進行調整。