Question

我正在制作这个小网站，而我正试图制作用户个人资料。老实说，我并不是最好的HTML和CSS，但基本上，我的问题是，我想在＆＃34; jumbotron＆＃34;的左上方显示个人资料图片。（我正在使用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）：

<------------------- 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的宽度为图片大小的图片和浮动到右边的名称。通过更改profileContainer宽度，您可以使名称更接近图片，或者您也可以在名称和报价上设置margin-right: #px;。

Answer 2

<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类。 col-md-5 和 col-md-7 用于按行划分div。

使用 img-responsive ，您可以按比例对齐div中的图片。

Make元素出现在div的右侧

2 个答案: