一旦图像被添加，div的高度就会延长

用了2天的时间与此战斗：http://jsfiddle.net/DQFja/537/ 基本上有一个名为“table”的父div，其中有两个单元格。一个单元格具有子div，另一个单元格具有图像。图像不会像我预期的那样显示在div的左上角。这可以通过从sub-div中删除“height”属性来解决，但我需要它（div用于背景，cell1也用于背景）。一旦图像被添加，div的高度就会延长

<div id="table"> 
<div id="cell1"> 
    <div id="sub-cell1"> 
    </div> 
</div> 
<div id="cell2"> 
    <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="20"/> 
</div> 
</div> 

#table 
{ 
display:table; 
height:103px; 
} 

#cell1, #cell2 
{ 
display:table-cell; 
} 

#cell1 
{ 
width:50%; 
height:103px; 
background-color:green; 
} 

#sub-cell1 
{ 
width:100%; 
height:103px; 
display:inline-block; 
} 

#cell2 
{ 
width:1000px; 
height:103px; 
background-color:red; 
}

任何人可以解释我为什么在这里第二个div图像不位于左上方？如果图像被移除或者子div被移除或者子div的“height”属性被移除，它可以按预期工作。

来源

2016-07-04 user1826208

表中这样的方式垂直居中元素表现的解决方案可能是

1）您可以添加垂直对齐：首位;到小区 2）使用绝对定位的图像

#cell2 
{ 
width:1000px; 
height:103px; 
background-color:red; 
vertical-align: top; 
}

http://jsfiddle.net/DQFja/539/

来源

2016-07-04 17:02:08

非常感谢，也做到了！ – user1826208

尝试以下操作：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <style> 
      .table { 
       display: table; 
       width: 100%; 
      } 

      .tableRow { 
       display: table-row; 
      } 

      .tableCell { 
       display: table-cell; 
       height: 103px; 
      } 

      .tableCell:first-child { 
       background-color: green; 
       width: 50%; 
      } 

      .tableCell:last-child { 
       background-color: red; 
      } 

      img { 
       height: 20px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="table"> 
      <div class="tableRow"> 
       <div class="tableCell"> 
        <div class="subDiv"> 

        </div> 
       </div> 

       <div class="tableCell"> 
        <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" /> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

https://jsfiddle.net/8r262g29/

来源

2016-07-04 19:18:46 Mers

谢谢！该解决方案也适用。 – user1826208

一旦图像被添加，div的高度就会延长

回答

相关问题