Question

是否有可能在不使用绝对位置和浮动的情况下将div放置在容器的右侧？每当我使用float:right或position: absolute时，容器都不知道浮动或定位的元素内容高度，这会导致布局问题。

我尝试将固定高度设置为浮动或定位元素，然后将填充底部添加到浮动或定位元素的高度。

.container{
  padding-bottom: 20px;
}

.container .float_right{
   float: right;
   height: 20px;
}

尽管可以，但我正在寻找比这更好的解决方案。这里的任何人都可以告诉我是否有任何其他解决方案的问题？

Answer 1

只需将overflow: hidden;添加到.container，read more here

即可

.container{
  padding-bottom: 20px;
  overflow: hidden;
}

.container .float_right{
   float: right;
   height: 20px; /* no longer necessary */
}

为了看到padding-top的效果，我保留了height和overflow: hidden;个样式。没有固定的高度。

codepen

Answer 2

将.container个样式text-align:right设置为父

   .container{
      padding-bottom: 20px; 
      text-align:right;
      width:100%
    }

和

.container .float_right{
       //float: right;
       height: 20px;
       display:inline-block;
    }

.container{
  padding-bottom: 20px; 
  text-align:right;
  width:100%
}

.container .float_right{ 
   height: 20px;
   display:inline-block;
}

<div class="container">
  <div class="float_right">
    Right align div
  </div>
</div>

或将父级设为display:flex，将margin-left: auto;设置为子级

.container{
  padding-bottom: 20px;  
  width:100%;
  display:flex; 
}

.container .float_right{ 
   height: 20px; 
   margin-left: auto;
}

<div class="container">
      <div class="float_right">
        Right align div
      </div>
    </div>

或者为了修复容器的高度，你可以添加一个带有类清除和设置样式的div

.clear{
      clear:both;
  }

.container{
  padding-bottom: 20px; 
  background:red;
  width:100%
}

.container .float_right{
   float: right;
   height: 40px;

}
.clear{
   clear:both;
 }

<div class="container">
  <div class="float_right">
  float right
  </div>
  <div class="clear"></div>
</div>

Answer 3

即使我接受了答案，我认为以下解决方案比其他所有解决方案都要好一些，因为它不要求你在容器或浮动元素的高度上使用填充底部。

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

在容器元素上应用上面的代码;这样可以解决问题。

归功于 https://css-tricks.com/

如何在没有绝对位置和浮动的情况下将div放置到容器的右端？

3 个答案: