Question

以下标记扩展了容器div（它有一个我想要显示的背景图像），但是对齐左边的框：

HTML：

<div class="container">
<div class="box"></div>
</div>

CSS

.container{
  background-image:url('image.png');
  width:100%;
}
.box{
  width:100px;
  height:100px
}

如果我在框中使用float:right或position:absolute;right:0px;，它会向右对齐，但容器div不会展开以适合框。

有没有办法将盒子对齐到屏幕的右侧，同时让容器展开以适应？谢谢你的阅读。

Answer 1

float:right;在盒子上工作，只需在容器上添加overflow:auto。

下面的示例，边框已添加到框中以供查看：

＆＃13;

.container {
    background-image:url('http://www.placehold.it/100x100');
    width:100%;
    overflow:auto;
}
.box {
    width:100px;
    height:100px;
    border:1px solid red;
    float:right;
}

＆＃13;

<div class="container">
    <div class="box"></div>
</div>

＆＃13;

Answer 2

使用浮动时，您需要为容器使用clearfix：

.container:after {
   content: "";
   display: table;
   clear: both;
}

并按原样将框浮动：）

这是为了强制容器识别浮动的内容。 clearfix是元素自动清除其子元素的一种方式，因此您不需要添加其他标记。它通常用于浮动布局。

示例：http://jsfiddle.net/v3r3p5cs/

此方法将有助于支持IE 8及更高版本的浏览器以及所有现代浏览器

如果您需要较少的IE8支持，因为较旧的浏览器不支持空内容，您可以使用：

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

在扩展容器时将div对齐

2 个答案: