Question

我的“关于我”和呼应的“关于文本”出现在包含的div（class =“ u-about”）下面，对于他们两个，我都不知道为什么这样做，并且id而不是使用相对定位将其向上移动（看起来很混乱），并且它不应该首先这样做。任何有关如何解决此问题的想法将不胜感激！

我的CSS代码：

.profile-about { /* contains profile card and about card */
float: left;
}

.u-about {
position: relative;
top: 100px;
display: block;
width: 400px;
height: 220px;
background-color: white;
border-radius: 10px;
text-align: center;
margin: 0px;
}

.ubout {
margin: 0px;

}

我的html代码：

 <section>
  <div>
    <div class="profile-about">
    <div class="u-profile-card">
        <h3>Guide:</h3>
        <div>
          <h2><?php echo ucfirst($first);?> <?php echo $last; ?></h2>
        </div>
        <div class="img-txt">
        <div class="image-cropper">
        <img class="u-image" src="uploads/<?php echo $image; ?>" alt="no 
        image found">
        </div>
        <div class="u-info">
        <h2><?php echo ucfirst($u_city); ?>, <?php echo ucfirst($u_region); ? 
        >, <?php echo ucfirst($u_country); ?></h2>
        <h2><?php echo ucfirst($u_rating); ?> Stars</h2>
        <h2 class="u-email"><?php echo ucfirst($email); ?></h2>
        </div>
      </div>
    </div>
    <div class="u-about">
        <div>
          <h1>About me</h1>
          <p class="ubout"><?php echo ucfirst($about); ?></p>
        </div>
    </div>
    </div>

Answer 1

通过包含div，我假设您是指它们的直接父级<div class="u-about">。元素实际上并没有出现在...之下，尽管它们很可能出现，因为您在该元素上拥有top: 100px。只需删除它，整个.u-about元素就会出现在页面上，包括两个文本：

.profile-about {
  /* contains profile card and about card */
  float: left;
}

.u-about {
  position: relative;
  /*top: 100px;*/
  display: block;
  width: 400px;
  height: 220px;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  margin: 0px;
}

.ubout {
  margin: 0px;
  position: relative;
  bottom: 200px;
}

<section>
  <div>
    <div class="profile-about">
      <div class="u-profile-card">
        <h3>Guide:</h3>
        <div>
          <h2>
            <?php echo ucfirst($first);?>
            <?php echo $last; ?>
          </h2>
        </div>
        <div class="img-txt">
          <div class="image-cropper">
            <img class="u-image" src="uploads/<?php echo $image; ?>" alt="no 
        image found">
          </div>
          <div class="u-info">
            <h2>
              <?php echo ucfirst($u_city); ?>,
              <?php echo ucfirst($u_region); ? 
        >, <?php echo ucfirst($u_country); ?>
            </h2>
            <h2>
              <?php echo ucfirst($u_rating); ?> Stars</h2>
            <h2 class="u-email">
              <?php echo ucfirst($email); ?>
            </h2>
          </div>
        </div>
      </div>
      <div class="u-about">
        <div>
          <h1>About me</h1>
          <p class="ubout">
            <?php echo ucfirst($about); ?>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

尝试一下：-

.profile-about { /* contains profile card and about card */
float: left;
}

.u-about {
position: relative;
display: block;
top:100px;
width: 400px;
height: 220px;
background-color: white;
border-radius: 10px;
text-align: center;
margin: 0px;
}

.ubout {
margin: 0px;
position: relative;
bottom: 200px;
}
.child{
    position: absolute;
    height: 320pxpx;
    margin: -100px 0 0 0px;
}

<section>
  <div>
    <div class="profile-about">
    <div class="u-profile-card">
        <h3>Guide:</h3>
        <div>
          <h2><?php echo ucfirst($first);?> <?php echo $last; ?></h2>
        </div>
        <div class="img-txt">
        <div class="image-cropper">
        <img class="u-image" src="uploads/<?php echo $image; ?>" alt="no 
        image found">
        </div>
        <div class="u-info">
        <h2><?php echo ucfirst($u_city); ?>, <?php echo ucfirst($u_region); ? 
        >, <?php echo ucfirst($u_country); ?></h2>
        <h2><?php echo ucfirst($u_rating); ?> Stars</h2>
        <h2 class="u-email"><?php echo ucfirst($email); ?></h2>
        </div>
      </div>
    </div>
      
    <div class="u-about" style="background-color:red;">
         <div class="child">
           <h1>About me</h1>
           <p class="ubout"><?php echo ucfirst($about); ?></p>
         </div>
    </div>
    </div>

CSS-如何修复出现在包含div框下面的文本？

2 个答案: