浮動小数点型の浮動小数点ポストがポストボックス外に出る

Question

ポストボックスとデータと位置を各コーナーの下にしたいと思っています。 floatigは動作しますが、ボックスの下に表示され、ボックスのサイズを変更できる要素としてカウントされません。これはhow I Imagine

* { 
 
    text-align: center; 
 
} 
 
.post { 
 
    width: 75%; 
 
    margin-bottom: 32px; 
 
    background-color: #f4f4f4; 
 
    ; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    transition: all 250ms; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.post:hover { 
 
    transform: translateY(-5px); 
 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 
 
    cursor: pointer; 
 
} 
 
.post > h2 { 
 
    font-family: "Oswald"; 
 
    margin-bottom: 4px; 
 
} 
 
.post > h3 { 
 
    margin-top: 4px; 
 
    font-family: "Oswald"; 
 
    color: #9e9e9e; 
 
    font-weight: 400; 
 
    font-style: italic; 
 
} 
 
.post > img { 
 
    width: 90%; 
 
    border-radius: 4px; 
 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
 
    margin-bottom: 32px; 
 
} 
 
.post > .postdate { 
 
    float: left; 
 
    margin-top: 0px; 
 
    font-family: "Ubuntu Mono"; 
 
    padding-top: 0px; 
 
} 
 
.post > .postlocation { 
 
    float: right; 
 
    font-family: "Ubuntu Mono"; 
 
    margin-top: 0px; 
 
    padding-top: 0px; 
 
}

<div class="post"> 
 
    <h2>BlaBlaBla</h2> 
 
    <h3>BlaBlaBlaBlaBlaBla</h3> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"> 
 
    <p class="postdate">01.07.2016</p> 
 
    <p class="postlocation">Berlin</p> 
 
</div>

Answer 1

これを行うには多くの方法です。これらのp要素に負のマージンを追加することができます。 "POSTDATE" と "postlocation" の幅を50％に設定し、左と右のテキスト揃えとマージントップを与える

* { 
 
    text-align: center; 
 
} 
 
.post { 
 
    width: 75%; 
 
    margin-bottom: 32px; 
 
    background-color: #f4f4f4; 
 
    ; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    transition: all 250ms; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.post:hover { 
 
    transform: translateY(-5px); 
 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 
 
    cursor: pointer; 
 
} 
 
.post > h2 { 
 
    font-family: "Oswald"; 
 
    margin-bottom: 4px; 
 
} 
 
.post > h3 { 
 
    margin-top: 4px; 
 
    font-family: "Oswald"; 
 
    color: #9e9e9e; 
 
    font-weight: 400; 
 
    font-style: italic; 
 
} 
 
.post > img { 
 
    width: 90%; 
 
    border-radius: 4px; 
 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
 
    margin-bottom: 32px; 
 
} 
 
.post > .postdate { 
 
    float: left; 
 
    margin-top: -20px; 
 
    font-family: "Ubuntu Mono"; 
 
    padding-top: 0px; 
 
} 
 
.post > .postlocation { 
 
    float: right; 
 
    font-family: "Ubuntu Mono"; 
 
    margin-top: -20px; 
 
    padding-top: 0px; 
 
}

<div class="post"> 
 
    <h2>BlaBlaBla</h2> 
 
    <h3>BlaBlaBlaBlaBlaBla</h3> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"> 
 
    <p class="postdate">01.07.2016</p> 
 
    <p class="postlocation">Berlin</p> 
 
</div>

Answer 2

..

* { 
 
    text-align: center; 
 
} 
 
.post { 
 
    width: 75%; 
 
    margin-bottom: 32px; 
 
    background-color: #f4f4f4; 
 
    ; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    transition: all 250ms; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.post:hover { 
 
    transform: translateY(-5px); 
 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 
 
    cursor: pointer; 
 
} 
 
.post > h2 { 
 
    font-family: "Oswald"; 
 
    margin-bottom: 4px; 
 
} 
 
.post > h3 { 
 
    margin-top: 4px; 
 
    font-family: "Oswald"; 
 
    color: #9e9e9e; 
 
    font-weight: 400; 
 
    font-style: italic; 
 
} 
 
.post > img { 
 
    width: 90%; 
 
    border-radius: 4px; 
 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
 
    margin-bottom: 32px; 
 
} 
 
.post > .postdate { 
 
    width:50%; 
 
    float: left; 
 
    text-align:left; 
 
    margin-top: -20px; 
 
    font-family: "Ubuntu Mono"; 
 
    padding-top: 0px; 
 
} 
 
.post > .postlocation { 
 
    width:50%; 
 
    float: right; 
 
    text-align:right; 
 
    font-family: "Ubuntu Mono"; 
 
    margin-top: -20px; 
 
    padding-top: 0px; 
 
}

<div class="post"> 
 
    <h2>BlaBlaBla</h2> 
 
    <h3>BlaBlaBlaBlaBlaBla</h3> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"> 
 
    <p class="postdate">01.07.2016</p> 
 
    <p class="postlocation">Berlin</p> 
 
</div>