Question

#footer, #container:after{

	height: 150px;
}


#footer{

	background-color: #006699;
	clear: both;
}

#wrap {
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

#sub {

	padding: 12px;
	width: 32%;
	height: 40px;
	color: white;
	border-right: solid white 1px;
}

.sub:last-child{

	border: 0px;
}

<div id="footer">
	<div class="wrap">
		<div class="sub">Lorem Ipsum</div>
		<div class="sub">Lorem Ipsum </div>
		<div class="sub">Lorem Ipsum </div>
	</div>
</div>

好的，所以我昨天刚刚做了这个，并且在我的封面上将display flex设置在页脚上工作得很好。今天我的布局略有变化，所以可能是由于这一点，然而，我不能让我的div在页脚id中并排排列。基本上我希望每个div在我的页脚中沿着一个轴均匀分布，但是在当前它们是垂直堆叠而不是水平堆叠。

每个子数为40，因此40 X 3（3个子div）总数为120，远离页脚的总高度，为150px。我甚至制作了柔性包裹物。任何人都可以帮助我，为什么我会遇到这个问题？

<div id="footer">
    <div class="wrap">
        <div class="sub">Lorem Ipsum</div>
        <div class="sub">Lorem Ipsum </div>
        <div class="sub">Lorem Ipsum </div>
    </div>
</div>

Answer 1

这是一个简单的例子，你在CSS中引用ID而不是类。

#wrap / #sub而不是.wrap / .sub

＆＃13;

* {
  box-sizg:border:box;
  }

#footer {
  height: 150px;
  background-color: #006699;
}
.wrap {
  display: flex;
  align-items:center;
}
.sub {
  padding: 12px;
  width: 32%;
  height: 40px;
  color: white;
  border-right: solid white 1px;
}

＆＃13;

<div id="footer">
  <div class="wrap">
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
  </div>
</div>

＆＃13;

显示柔性而非中心对齐

1 个答案: