Question

我在Chrome中遇到浮动问题。 Firefox和IE / Edge中的一切看起来都很好，但只要你在Chrome中加载它就无法正常渲染。这可能不是最好的方法，但我努力做到这一点。

我左上角有一个logo（logo.png），右上角有另一个图像（right.png）。 tight.png是徽标高度的两倍，我需要它坐在页面上的内容上方，但徽标的垂直位置相同。

.floatleft{
    background: url("images/logo.png") no-repeat scroll center top transparent;
    float: left;
    width: 641px;
    height: 76px;
    margin: 10px;
    position: absolute;
    z-index:1000;
}

.floatright{
    background: url("images/right.png") no-repeat scroll center top transparent;
    float: right;
    width: 255px;
    height: 150px;
    margin: 0px;
    position: absolute;
    z-index:1000;
}

<div class="floatleft">
<img src="images/logo.png">
<img class="floatright">
</div>

我知道最后一部分特别难看。

Answer 1

你有3个选项可以并排放置这两个div：

浮筒
内联块
Flexbox的

浮筒

值得注意的是，今天，随着使用更好的替代品，使用浮动元素进行布局越来越不受欢迎。

.container{
  width: 900px;
  margin: 10px auto;
}
.container:after{
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.floatleft{
  float: left;
  width: 641px;
  height: 75px;
  margin-right: 4px;
}
.floatleft .img{
  width: 641px;
  height: 75px;
  background: url("http://placehold.it/641x75") no-repeat scroll center top transparent;
}
.floatright{
  float: right;
  width: 255px;
  height: 150px;
}
.floatright .img{
  width: 255px;
  height: 150px;
  background: url("http://placehold.it/255x150") no-repeat scroll center top transparent;
}

<div class="container">
	<div class="floatleft">
		<div class="img"></div>
	</div>
	<div class="floatright">
		<div class="img"></div>
	</div>
</div>

内联块

这比浮点数要好得多，因为你可以使用vertical-align来控制垂直位置。在下面的代码段中，我将其设为vertcial-align: middle（您还有其他两个选项：top＆amp; bottom）。

关于浏览器兼容性，IE8 +

支持它

.container{
  width: 900px;
  margin: 10px auto;
}
.left{
  display: inline-block;
  vertical-align: middle;
  width: 641px;
  height: 75px;
  margin-right: 4px;
}
.left .img{
  width: 641px;
  height: 75px;
  background: url("http://placehold.it/641x75") no-repeat scroll center top transparent;
}
.right{
  display: inline-block;
  vertical-align: middle;
  width: 255px;
  height: 150px;
}
.right .img{
  width: 255px;
  height: 150px;
  background: url("http://placehold.it/255x150") no-repeat scroll center top transparent;
}

<div class="container">
	<div class="left">
		<div class="img"></div>
	</div><div class="right">
		<div class="img"></div>
	</div>
</div>

Flexbox的

灵活的框或flexbox是CSS3中的一种新布局模式。当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，使用flexbox可确保元素的行为可预测。

.container{
  width: 900px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left{
  width: 641px;
  height: 75px;
}
.left .img{
  width: 641px;
  height: 75px;
  background: url("http://placehold.it/641x75") no-repeat scroll center top transparent;
}
.right{
  width: 255px;
  height: 150px;
}
.right .img{
  width: 255px;
  height: 150px;
  background: url("http://placehold.it/255x150") no-repeat scroll center top transparent;
}

<div class="container">
	<div class="left">
		<div class="img"></div>
	</div>
	<div class="right">
		<div class="img"></div>
	</div>
</div>

Chrome浮动问题（Firefox＆amp; IE工作正常）

1 个答案:

浮筒

内联块

Flexbox的