Question

我目前左边有一张图片，图片右侧有<ul/>和<div/>。

Answer 1

你的代码非常接近，但有一些东西会把它抛弃。

内联样式中的花括号是不正确的语法。用引号替换你的花括号。
你不需要像css值那样引用你的方式。
将页脚更改为隐藏的溢出（见下文）。
将页脚高度更改为70px，使其高度足以显示文本div。
使文本div上的颜色为白色，以便显示文本。
还包含一个带溢出的div：在ul和文本div周围隐藏它，这样文本div就不会向左浮动到图像下方。

溢出：隐藏是处理浮点数时的一个很好的技巧 - 通常浮动元素从其父元素中弹出并放置溢出：隐藏在父元素上是解决此问题的一种方法。唯一没有解决的问题是垂直居中 - 我并不完全确定你的意思，因为它们在页脚中垂直居中。

*已编辑 - 意识到我的原始答案未达到您提及的所有项目

http://jsbin.com/xorikisilo/edit?html,css,output

Answer 2

你可以使用display：table;和vertical-align：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;
}

如何与div下面？

2 个答案: