Как содержать поплавки внутри DIV

У меня есть два встроенных элемента в div. Один элемент перемещается влево, а другой - вправо. Я использовал абсолютное позиционирование для размещения блока, содержащего встроенные элементы в нижней части 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; 
} 
}

источник

2016-11-03 samsos

Это из-за края, что вы дали 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; 
}

Для получения дополнительной информации о box-sizing

источник

2016-11-03 07:34:17

Ваше решение и решение @GVM отлично работают. В этой ситуации я не уверен, кого я должен повышать и отмечать как правильные. Хотя у меня есть вопрос. Почему вы добавили размер коробки? – samsos

Свойства ширины и высоты включают в себя содержимое, заполнение и границу, но не границу. Эта ссылка может помочь вам http://www.w3schools.com/cssref/css3_pr_box-sizing.asp –

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

источник

2016-11-03 07:35:09 GvM

Просто добавить примечание я заметил, в то время как я работаю над приложением PHP. Использование float в пределах <div> переопределяет весь div. для уточнения моей точки зрения. если у вас есть <div class="page-wrapper"> и в нем у вас есть <div id="img-align">, и у него есть поплавок, он переопределяет "page-wrapper" и стоит отдельно. не используйте его, если он вам не нужен. Спасибо

источник

2016-11-03 07:44:18 imohd23

Как содержать поплавки внутри DIV

ответ

Смежные вопросы