使用float的post子信息已经过了邮箱

Question

我希望在底部的每个角落都有一个邮箱，数据和位置。 floatig工作，但它们出现在框下面，并不算作可以调整框大小的元素。这是how I Imagine

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

许多方法都可以做到这一点。一个可能是为这些p元素添加负边距。

* {
  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

设置＆＃34; postdate＆＃34;的宽度50％和＆＃34; postlocation＆＃34;和text-align左右对齐并给出margin-top ..

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;