多个项目向左浮动和一个项目向右浮动的 CSS 问题答案

【问题标题】：CSS issue with multiple items floated left and one item floated right多个项目向左浮动和一个项目向右浮动的 CSS 问题
【发布时间】：2014-06-18 02:07:39
【问题描述】：

我在此网页的标题中遇到浮动问题 - 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（并使其向右浮动），我告诉元素首先向右浮动，但肯定有更好的方法来使用 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;
}

【问题讨论】：

我不明白。把.callback放在最上面可以达到想要的效果，但你宁愿把它放在最下面？
是的，我已将 .callback 置于顶部以实现定位修复，但遵循逻辑 HTML 阅读顺序 .callback 应出现在底部，然后使用 CSS 设置样式。
@user3749125 如果您链接您的网站，请不要使用密码保护它。不过，小提琴会更好。
@Oriol 抱歉，密码保护已关闭。
如果你想要.callback结尾，我认为唯一的方法是绝对定位，或者CSS3 FlexBoxes。

标签： html css css-float

【解决方案1】：

您可以：从.callback 中删除float:right 并添加：

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

在屏幕宽度大于 1340 像素之前看起来不错，然后您可以通过媒体查询进行调整。

【讨论】：