故意使两个伸缩容器在相同的确切特定位置重叠

Question

我需要使“ flex-container> div4”垂直重叠和/或与“ flex-container> div2”水平对齐。

需要div2和div4居中对齐。

我使用文本对齐方式使div2居中，但div4是图像。

val LoginActivityTypeId = 0
val LogoutActivityTypeId = 1
case class User(userId: Long, userName: String)

case class UserActivity(userId: Long, activityTypeId: Int, timestampEpochSec: Long)


val userRdd = spark.sparkContext.parallelize(Array(
  User(1, "Doe, John"),
  User(2, "Doe, Jane"),
  User(3, "X, Mr.")
))
  .map(e => (e.userId, e))

val userActivity = spark.sparkContext.parallelize(Array(
  UserActivity(1, LoginActivityTypeId, 1514764800L),
  UserActivity(2, LoginActivityTypeId, 1514808000L),
  UserActivity(1, LogoutActivityTypeId, 1514829600L),
  UserActivity(1, LoginActivityTypeId, 1514894400L)
))
  .map(e => (e.userId, e))

val result = userRdd
  .leftOuterJoin(userActivity)

val s = result.filter(e => e._2._2.isDefined && e._2._2.get.activityTypeId == LoginActivityTypeId)
  .map(e => (e._2._1.userName, e._2._2.get.timestampEpochSec))
  .reduceByKey((a, b) => if (a < b) a else b)

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: blue;
}

.flex-container > div {
  background-color: #ffffff;
  	margin-top: auto;
    margin-right: auto;
  flex-shrink: 0;
  height: 35px;
 min-width: 150px;
 max-width: 150px;
  text-align: left;
  line-height: 50px;
  font-size: 30px;
}
.flex-container > div2 {
background-color: #ffffff;
flex-shrink: 0;
margin-top: auto;
height: 50px;
  width: 250px;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  }
  .flex-container > div3 {
	margin-top: auto;
    margin-left: auto;
  	width: 150px;
    height: 35px;
 	text-align: center;
  	line-height: 50px;
  	font-size: 15px;
    position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: white;
  }
  .flex-container > divspacer {
  	background-color: #ffffff;
  	width: 33%;
    height: 35px;
 	margin: 1px;
 	text-align: center;
  	line-height: 50px;
  	font-size: 12px;
    }
    .flex-container > div4 {
    margin-left: auto;
    background-color: #ffffff;
    text-align: center;
    }

因此，可以得出结论，也许不是重叠，但我需要div4（网站解决方案png）完美居中并位于页面底部（垂直边距约为1像素）

已修复：

<div class="flex-container">

  	<div><img src="https://oakandrocks.com/wp-content/uploads/2019/04/perfootersmol.png"></div>  
    <div2>
    <a class="inline" style="text-decoration: none" href="https://oakandrocks.com/onr"> Webmasters |</a>
	<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/terms"> Terms & Conditions |	  </a>
	<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/privacy"> Privacy Policy 		</a>
    </div2>
	<div3><a style="text-decoration: none" href="https://oakandrocks.com/">© 2019 Oak & Rocks</a></div3>
</div>
<div class="flex-container"><div4><img src="https://oakandrocks.com/wp-content/uploads/2019/04/footertxt.png"></div4></div>

Answer 1

在发布问题后，像往常一样，我找到了解决方法。

添加：

.flexcontainer > div4 {
display: block;
margin-left: auto;
margin-right: auto;
}