Сделать элемент справа от div

Question

Я делаю этот маленький веб-сайт, и я пытаюсь создать профили пользователей. Я честно не самый лучший с HTML и CSS, но в основном, моя проблема в том, что я хочу отобразить изображение профиля в левом верхнем углу «jumbotron» (я использую bootstrap), и имею имя пользователя только для справа от него, с небольшим абзацем/цитатой/девизом под именем пользователя. Однако я не могу заставить его работать.

Вот мой текущий код:

HTML

<div class="container"> 
    <!-- Profile Jumbotron--> 
    <div class="jumbotron"> 
     <div class="profile-picture"> 

     </div> 
     <h1><?php echo "$profile_name" ?></h1> 
    </div> 
</div> 

CSS:

.jumbotron { 
margin-top: 5%; 
margin-bottom: 2%; 
} 

.profile-picture { 
    width: 200px; 
    height: 200px; 
    background-color: white; /* Just as a test profile picture */ 
} 

Here is the result of this code

Я попытался правой выровнять текст, но безрезультатно ,

Конечно, есть очевидный float:right, который работает достаточно хорошо, но затем the height of the jumbotron gets all screwed up! Если я не делаю что-то не так с этим.

Итак, со всем, что сказал, я надеюсь, что кто-то может мне помочь, поскольку вы, кажется, здесь очень полезны!

Спасибо, что нашли время, чтобы прочитать мою проблему, и я надеюсь, что вы можете помочь мне в ее исправлении!

Answer 1

<div class="container"> 
<!-- Profile Jumbotron--> 
<div class="jumbotron col-md-12"> 
    <div class="profile-picture pull-left col-md-5"> 
     <img class="img img-responsive" src="Your image" style="width:200px"/> 
    </div> 
    <h1 class="pull-right col-md-7"> 
     <?php echo "$profile_name" ?> 
    </h1> 
</div> 
</div> 

.profile-picture { 
    background-color: white; /* Just as a test profile picture */ 
} 

Я думаю, что что-то подобное получило бы трюк, так как вы используете фреймворк начальной загрузки. Обратите внимание на классы css, которые я положил pull-left и pull-right. col-md-5 и col-md-7 используются для разделения столбца div.

с помощью img-responsive вы сможете пропорционально выравнивать изображение внутри div.

Answer 2

Вы можете сделать один простой вещь (фотография, имя и процитировать все дивы):

<------------------- LARGE DIV -------------------> 

<---PICTURE(float:left)  NAME(float:right) 
<br> 
           QUOTE(float: right) 

<-------------------------------------------------> 

Как достичь этого:

<div id="profileContainer" style="width: 800px;"> 
    <div id="picture" style="width: 200px; float: left;"><img src="yourimage.jpg"></div> 
    <div id="name" style="width: 400px;"><?php echo "$profile_name" ?></div> 

    <br> 

    <div id="quote" style="width: 400px; float:right;">Text about stuff</div> 
</div> 

Так в основном у вас есть profileContainer DIV с шириной вы хотите, изображение с шириной div - это размер изображения и имя, плавающее вправо. Изменив ширину профиляContainer, вы можете получить название ближе к изображению, или вы также можете установить margin-right: #px; на имя и цитату.