Переместить часть текста в правую часть 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

Вы можете использовать поплавок : right –

Идея: 1) Сделать изображение в качестве фона div и иметь paddin г ширины изображения для 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

ответ

Смежные вопросы