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 我还向float:right申请了.callback。

问题在于，当我从左侧.callback稍微水平调整浏览器时（包含文本 - “请求我们呼叫你”）将包裹在其他元素下面，而我宁愿它与内联左边浮动的元素。

但是我发现，如果我将.callback移到HTML片段的顶部，以便它位于浏览器阅读顺序的顶部，那么问题就会被删除。但是，我相当肯定使用浏览器阅读顺序定位我的元素是不好的实践。通过首先声明.callback（并向右浮动），我告诉元素首先向右浮动，但肯定有更好的方法来实现这一点吗？

<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

你可以：从float:right移除.callback并添加：

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

在屏幕宽度大于1340px之前看起来很好，然后您可以使用媒体查询进行调整。

带有多个项目的CSS问题向左浮动，一个项目向右浮动

1 个答案: