Question

如何格式化CSS以使文本内部＆＃34; header-right＆＃34;应该在底部对齐，而我的图像在＆＃34; header-left＆＃34;在顶部对齐？

这是我的HTML：

＆＃13;

<div class="container">     
    <div class="header-left;">      
         <img src="img1.png">   
    </div>  
    <div class="header-right;">         
         <div style="float:left;">
              This text should be at the bottom.
         </div>
         <div style="float:left;">
              This text should be at the bottom also.
         </div>
    </div>
</div>

＆＃13;

感谢：。）

Answer 1

您可以将.container替换为表格，将.header-right和.header-left替换为表格单元格。这样，您可以将内容对齐垂直底部（甚至顶部或中间）

请参阅下面的代码段

＆＃13;

.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}

＆＃13;

<div class="container">     
    <div class="header-left">      
         <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">   
    </div>  
    <div class="header-right">         
         <div style="">
              This text should be at the bottom.
         </div>
         <div style="">
              This text should be at the bottom also.
         </div>
    </div>
</div>

＆＃13;

Answer 2

从你的班级命名我想你想要两个文本在图像的右边，与图像底部对齐？

要实现此目的，请将display: inline-block应用于所有DIV，另外将display: block;应用于图片以避免底部有任何空间：

.header-left,
.header-right,
.header-right div {
  display: inline-block;
}

.header-left img {
  display: block;
}

<div class="container">
  <div class="header-left">
    <img src="http://placehold.it/80x120">
  </div>
  <div class="header-right">
    <div>
      This text should be at the bottom.
    </div>
    <div>
      This text should be at the bottom also.
    </div>
  </div>
</div>

顺便说一句：不要在class="header-right"（在DIV标签内）和类似地使用分号。

将文本对齐div中的两个div

2 个答案: