css - 如何获得正确的内容以堆积在页脚中？

如何仅使用CSS或SCSS使页脚右侧的两个div相互堆叠，同时又能正确对齐呢？

这是我到目前为止的内容：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>

最佳答案

这是您想要的吗？我将带有文本的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>

关于css - 如何获得正确的内容以堆积在页脚中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50884351/