将部分文本移动到div的右侧

我有一个带有文本的div，我想将某些文本移动到div的右侧，而无需创建和处理表格。下面是我有和它的作品无济于事：将部分文本移动到div的右侧

<div style="height:50px;background-color:#06276F;color:#FFF;padding:5px;"> 
    <img align="left" height="50px" width="50px" style="margin-right: 10px;" 
     src="<?php echo PilotData::getPilotAvatar($pilotid);?>" /> 
    <strong>Name: </strong> <?php echo Auth::$userinfo->firstname . ' ' . Auth::$userinfo->lastname;?> 
    <span style="text-align:right;"><strong>Total Flights: </strong><?php echo Auth::$userinfo->totalflights?></span><br /> 
    <strong>Pilot ID: </strong> <?php echo $pilotid ; ?> 
    <span style="text-align:right;"><strong>Total Hours: </strong><?php echo Auth::$userinfo->totalhours;?></span><br /> 
    <strong>Rank: </strong><?php echo Auth::$userinfo->rank;?> 
    <span style="text-align:right;"><strong>Hub: </strong><?php echo Auth::$userinfo->hub;?></span><br /> 
    </div>

这里是什么样子：

enter image description here

来源

2013-08-16 Pon-3

您可以使用float ：right – 2013-08-16 21:41:52

想法：1）将图像作为div的背景，并有一个paddin g的div的图像宽度。 2）在图像中使用float并将文本包裹在另一个浮动div中。 – mshsayem

@ marcelo2605不错。不知道你可以用文字做到这一点。 –

你为什么造型内嵌？一些建议，使你的代码更可持续

HTML（和可读性！）：

<div class="container"> 
    <img class="avatar" height="50" width="50" src="http://placekitten.com/50/50" /> 
    <div class="info"> 
    <ul> 
     <li><b>Name:</b> Christopher Pratt</li> 
     <li><b>Pilot ID:</b> UAL1</li> 
     <li><b>Rank:</b> Captain</li> 
    </ul> 

    <ul> 
     <li><b>Total Flights:</b> 1</li> 
     <li><b>Total Hours:</b> 90.3</li> 
     <li><b>Hub:</b> KJFK</li> 
    </ul> 
    </div> 
</div>

CSS：

.container { 
    background: #06276f; 
    color: #fff; 
    display: inline-block; 
    font-family: "Verdana"; 
    font-size: 11px; 
    height: 50px; 
    padding: 5px; 
    width: 390px; 
} 

.avatar { 
    float: left; 
    margin-right: 10px; 
} 

.info { 
    line-height: 1.5; 
} 

ul, li { margin: 0; padding: 0; } 

ul { 
    display: inline-block; 
    margin-right: 10px; 
} 

li { 
    list-style-type: none; 
}

Codepen链接：http://cdpn.io/tilra

来源

2013-08-16 22:52:20 kunalbhat

将部分文本移动到div的右侧

回答

相关问题