css - 如何让正确的内容堆叠在页脚中？

Question

如何让页脚右侧的两个 div 相互堆叠，同时仅使用 CSS 或 SCSS 进行对齐？

这是我目前拥有的:https://codepen.io/anon/pen/QxqZwR

footer {
  background-color: lightgray;
  font-size: 13px;
  width: 100%;
  padding: 18px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer ol {
  padding: 0;
  margin: 0;
}
footer ol li {
  display: inline;
  text-decoration: none;
}
footer .footer-image {
  background: url("http://static.jsbin.com/images/dave.min.svg") no-repeat center;
  background-size: cover;
  height: 80px;
  left: 0;
  width: 90px;
  margin-right: auto;
}
footer div:not(.footer-image) {
  align-self: center;
}

 <footer>
 <div class="footer-image"></div>
 <div>
   <ol>
    <li><a href="#">Hot Potato</a></li>
    <li><a href="#">Potato</a></li>
    <li><a href="#">Potato</a></li>
   </ol>
 </div>
 <div>Some other text...</div>
</footer>

Answer 1

这是您想要的吗？我将带有文本的 div 移动到带有列表的 div 中，并使用 text-align:right 对齐元素。

footer {
  background-color: lightgray;
  font-size: 13px;
  width: 100%;
  padding: 18px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer ol {
  padding: 0;
  margin: 0;
}
footer ol li {
  display: inline;
  text-decoration: none;
}
footer .footer-image {
  background: url("http://static.jsbin.com/images/dave.min.svg") no-repeat center;
  background-size: cover;
  height: 80px;
  left: 0;
  width: 90px;
  margin-right: auto;
}
footer div:not(.footer-image) {
  text-align:right;
}

<footer>
 <div class="footer-image"></div>
 <div>
   <ol>
    <li><a href="#">Hot Potato</a></li>
    <li><a href="#">Potato</a></li>
    <li><a href="#">Potato</a></li>
   </ol>
   <div>Some other text...</div>
 </div>
</footer>