How with div underneath?

Question

我目前有一个图像浮动到左边，与<ul/>和<div/>在图像的右侧。

Answer 1

可以使用display:table;垂直对齐:middle;这样的:

<footer id="footer">
   <div class="first-column">
       <img
       id="footer-logo"
       src="testImage.png"
       />
   </div>
   <div class="second-column">
      <ul style={{listStyleType: 'none'}}>
         <li style={{display: 'inline'}}>Text 1</li>
         <li style={{display: 'inline'}}>Text 2</li>
         <li style={{display: 'inline'}}>Text 3</li>
      </ul>
      <div style={{color: 'white'}}>Place me below ul</div>
   </div>
</footer>

和css:

#footer{
   display:table;
   width: 100%;
   height: 50px;
   left: 0;
   bottom: 0;
   background-color: black;
   z-index: 100;
   box-sizing: border-box;
   padding: 10px;
}
.first-column{
   display: table-cell;
   vertical-align: middle;
   width: 50px;
}
.first-column img{
   width: 100px;
}
.second-column{
   display: table-cell;
   width: 100%;
   vertical-align: middle;
}
.second-column ul li{
   list-style: none;
   color: #ffffff;
}
.second-column div{
   color: #ffffff;
   padding-left: 40px;
}

Answer 2

您的代码非常接近，但是有一些东西使它偏离。

• 内联样式中的花括号语法不正确。用引号代替花括号。
• 你不需要像你那样在css值周围加引号。
• 将页脚改为溢出隐藏(见下文)。
• 将页脚高度更改为70px，这样它的高度足以显示文本div。
• 设置文本div的颜色为白色，以便显示文本。

• 还要在ul和文本div周围换行一个带有overflow:hidden的div，这样文本div就不会在图像的左边浮动。

  Overflow:hidden在处理浮点元素时是一个很好的技巧——通常被浮动的元素会从它们的父元素中弹出，而在父元素上放置Overflow:hidden是解决这个问题的一种方法。唯一没有解决的问题是垂直居中-我不太确定你的意思，因为他们是垂直居中在页脚。

*编辑-意识到我原来的答案不符合你提到的所有项目

http://jsbin.com/xorikisilo/edit?html、css、输出