html - 多个元素向左浮动,一个元素向右浮动的 CSS 问题

标签 html css css-float

我在这个网页的标题中遇到 float 问题 - 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(包含文本 - “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;
}

最佳答案

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

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

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

关于html - 多个元素向左浮动,一个元素向右浮动的 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24268544/

相关文章:

CSS Float 不 float ?

html - 使用 CSS float :left and float:right, 或使用 CSS margin-left 和位置 :absolute? 实现此布局

javascript - 缩短重复功能

javascript - 单击时获取 div 的类名

html - 在较小的父 div 中缩小具有不同宽度的图像

css - 向 dd 元素添加元素符号样式

jQuery hover() 隐藏/显示导致反弹

javascript - 向上或向下排序列表项

css - 单选按钮列表的 Bootstrap CSS

html - 带有 float :right or similar 的 IE 中的 css 错误