html - 使元素出现在 div 的右侧

Question

我正在制作这个小网站，我正在尝试制作用户资料。老实说，我不是最擅长 HTML 和 CSS 的人，但基本上，我的问题是，我想在“超大屏幕”的左上角显示个人资料图片(我正在使用 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 */
}

我认为这样的事情可以解决问题，因为您使用的是 Bootstrap 框架。请注意我放置的 css 类 pull-left 和 pull-right。 col-md-5 和 col-md-7 用于按列划分 div。

通过使用 img-responsive，您将能够在 div 内按比例对齐图像。