另一个文本

Question

所以我制作了一个简单的系统，但问题是显示文字。我不知道如何使它像一个在另一个之下而不是这样：

http://i.imgur.com/FgKK1AR.jpg

如果我在行尾使用它会用它移动图像：

像之前一样：

http://i.imgur.com/RB90XfI.jpg

后：

http://i.imgur.com/04S8Vz2.jpg

代码：

＆＃13;

＆＃13;

 .usercover {
   background: url(../images/profili/cover.png) no-repeat;
   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#99000000', GradientType=0);
   width: 101%;
   height: 250px;
   overflow: hidden;
 }
 .usercover img {
   top: 0px;
   left: 0px;
   min-width: 100%;
   min-height: 250px;
   user-drag: none;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .covernebitno {
   border: 1px solid #DBDBDB;
   height: 250px;
   overflow: hidden;
   position: relative;
 }
 .avatar-profil img {
   min-height: 100px;
   min-width: 100px;
   max-height: 100px;
   max-width: 100px;
   border: 1px solid #fff;
   position: absolute;
   margin-top: 135px;
   margin-left: 13px;
 }
 .informacije p {
   font-size: 15px;
   margin-top: 145px;
   margin-left: 135px;
   color: white;
   position: absolute;
 }
 .bojeipticice {
   color: #696096;
 }
 .korisnikstatus {
   color: #000;
 }

＆＃13;

<div class="covernebitno">
  <div class="avatar-profil">
    <a href="/index.php?action=profile">', $context['member']['avatar']['image'], '</a>
    </center>
  </div>
  <div class="usercover">
    <div class="informacije">

      <p>', $context['member']['name'], ' <span class="bojeipticice"></br>', (!empty($context['member']['group']) ? $context['member']['group'] : $context['member']['post_group'])  . $context['member']['online']['text'] . '</p>
    <p>Posalji Poruku</p></div></span>
        <img src="http://i.imgur.com/U0TijfL.jpg" />

        <div class="covernebitno">

        </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

html真的搞砸了检查打开标签的位置以及关闭它们的位置！

在pss中选择的选择器是错误的，选择父级而不是子级。每个p都堆放在相同的坐标上

html清理了一下并更新了css选择器

＆＃13;

＆＃13;

.usercover {
   background: url(../images/profili/cover.png) no-repeat;
   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#99000000', GradientType=0);
   width: 101%;
   height: 250px;
   overflow: hidden;
 }
 .usercover img {
   top: 0px;
   left: 0px;
   min-width: 100%;
   min-height: 250px;
   user-drag: none;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .covernebitno {
   border: 1px solid #DBDBDB;
   height: 250px;
   overflow: hidden;
   position: relative;
 }
 .avatar-profil a {
   min-height: 100px;
   min-width: 100px;
   max-height: 100px;
   max-width: 100px;
   border: 1px solid #fff;
   position: absolute;
   margin-top: 135px;
   margin-left: 13px;
 }
 .informacije  {
   font-size: 15px;
   margin-top: 145px;
   margin-left: 135px;
   color: white;
   position: absolute;
 }
 .bojeipticice {
   color: #696096;
 }
 .korisnikstatus {
   color: #000;
 }

＆＃13;

<div class="covernebitno">
  <div class="avatar-profil">
    <a href="/index.php?action=profile">image</a>
  </div>
  <div class="usercover">
    <div class="informacije">

      <p>name
        <span class="bojeipticice">group text</span>
        </p>
    <p>Posalji Poruku</p>
    </div>
        <img src="http://i.imgur.com/U0TijfL.jpg" />

        <div class="covernebitno">

        </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;