將部分文本移動到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的右側

回答

相關問題