如何在 DIV 中包含浮点数

Question

我在 div 中有两个内联元素。一个元素向左浮动，另一个向右浮动。我使用绝对定位将包含内联元素的块放在 DIV 的底部。

问题：向右浮动的元素偏离了它的容器。我怎样才能解决这个问题，让它留在它的容器里？这是 CodePen.

HTML

 <div class="posts__post">
   <article>
      <a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
      <a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
      <div class="posts__post--meta">
        <a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
        <a class="posts__post__tag">Motivation</a> <!-- element floating out --->
     </div>
   </article>
</div>

SCSS

.posts__post{
    height: 400px;
    width: 310px;
    margin: 40px auto;
    //margin-bottom: 40px;
    position: relative;
    text-align: left;
    background-color: white;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);

   .posts__post--preview img{
      width: 100%;
      height: auto;
      border-radius: 5px 5px 0px 0px;
    }

  .posts__post--tag{
      font-size: em(15);
      font-weight: bold;
      color: $light-grey;
   }

  .posts__post--meta{
    color: $light-grey;
    position: absolute;
    bottom: 25px;
    left: 0;
    display: block;
   }

  .posts__post--title, .posts__post--tag, .posts__post--meta{
   margin: 0 25px;
   display: inline-block;
   text-docoration: none;
  }

 .posts__post__timestamp{
  float:left;
  }

 .posts__post__tag{
  float:right;
 }
}

Answer 1

这是因为您为 posts__post--meta 提供了边距，而不是使用边距使用填充，并且 box-sizing:border-box

.posts__post--meta{
    padding: 0 25px;
    display: inline-block;
    text-docoration: none;
    width: 100%;
    box-sizing: border-box;
}

For more info about box-sizing

Answer 2

.posts__post--meta{
    color: $light-grey;
    position: absolute;
    bottom: 25px;
    left: 0;
    right:0; //add this
    display: block;
   }

Answer 3

只是添加我在处理 php 应用程序时注意到的注释。在 <div> 中使用 float 会覆盖整个 div。澄清我的观点。如果你有 <div class="page-wrapper"> 并且其中有 <div id="img-align"> 并且它有一个浮点数，它会覆盖 "page-wrapper" 并独立存在。除非你真的需要它，否则不要使用它。谢谢

如何在 DIV 中包含浮点数

How to contain floats inside a DIV

html

css

sass

css-float