Question

我的页面标题中有3个div。第一个div是教师徽标，第二个div是网站标题，第三个div是大学徽标。

整个标题包含CSS：

height: 55px;
width:auto;

和背景颜色。

第一个div有：

#header .logoUt {
  width:285px;
  height:55px;
  float:left;
  background:url(images/Drawing1.png) no-repeat 0 0;
  background-position:left center; }

第二个div相同：固定宽度和向左浮动以及文本。

第三个div：

#header .logoEtti {
  width:285px;
  height:55px;
  float:right;
  background:url(images/Drawing1.png) no-repeat 0 0;
  background-position:left center; }

问题是：当我最小化浏览器窗口时，我怎么能做到这些div不会跳到彼此之下。抱歉我的英语不好。

P.S。我无法为整个标题设置固定宽度，因为我希望标题背景在整个页面中从左到右拉伸，高度为55px。

Answer 1

您可以为整个标头设置min-width：

#header {min-width: 855px;}

Answer 2

一种选择是不使用浮动而是定位。

试试这个：

提供标题position:relative

在position: absolute

中提供所有3个div

使用top:0;left:0作为第一个div

使用top:0;right:0作为最后一个

对于中间的一个，给左侧正确的px值：

最小化浏览器窗口时，浮动div跳到彼此之下

2 个答案: