[英]CSS issue with multiple items floated left and one item floated right
I'm having an issue with floats in the header of this web page - http://test.debtfree.co.uk/ . 我在与本网页的页眉彩车的问题- http://test.debtfree.co.uk/ 。 My markup is as follows:
我的标记如下:
<div class = "landline">
<!--content-->
</div>
<div class="mobile">
<!--content-->
</div>
<div class="times">
<!--content-->
</div>
<a class="callback">
<!--content-->
</a>
I have applied a float:left
rule to .landline
, .mobile
and .times
I have also appled a float:right
to .callback
. 我已经申请一个
float:left
规则.landline
, .mobile
和.times
我也appled一个float:right
给.callback
。
The issue is that when I resize the browser horizontally slightly from the left .callback
(contains the text - "Request We Call You") will wrap underneath the other elements, whereas I would rather that it sits inline with the elements that are floated left. 问题是,当我从左侧略微水平调整浏览器大小时,
.callback
(包含文本-“ Request We Call You”)将包裹在其他元素的下面,而我宁愿它与向左浮动的元素位于行内。
However I have found that if I move .callback
to the top of the HTML fragment, so that it is at the top of the browser reading order then the issue is removed. 但是,我发现,如果将
.callback
移到HTML片段的顶部,从而使其位于浏览器阅读顺序的顶部,则可以消除此问题。 However, I am fairly certain postioning my elements using the browser reading order is bad pratice. 但是,我相当确定使用浏览器阅读顺序来放置元素是不好的。 By stating the
.callback
first (and floating it right) I tell the element to float right first, but surely there is a better way to achieve this with CSS? 通过首先声明
.callback
(并使其正确浮动),我告诉该元素首先正确浮动,但是肯定有更好的方法用CSS实现此功能吗?
<a class="callback">
<!--content-->
</a>
<div class = "landline">
<!--content-->
</div>
<div class="mobile">
<!--content-->
</div>
<div class="times">
<!--content-->
</div>
CSS: 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;
}
you can: remove float:right
from .callback
and add: 您可以:从
.callback
删除float:right
并添加:
position: absolute;
top: 30px;
right: 0;
width: 140px;
It looks good until screen widths greater than 1340px, then you could just adjust with media queries. 直到屏幕宽度大于1340px为止,它看起来都不错,然后您可以根据媒体查询进行调整。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.