Question

对于模糊的标题感到抱歉，我不确定如何说出来。

基本上我试图让你在下面的图片中看到的3行文字（总帖子，声望等）与头像图像一起向下移动。

我不是设计师，所以我对此有一点问题，我也是StackOverflow的新手，所以我不确定我应该如何发布这个，对不起，如果它＆＆＃39;错了。

感谢。

Answer 1

解决这个问题的更好方法是将两个内容放在div中并给它们浮点数：left：D

＆＃13;

.first{
  width:100px;
  height:30px;
  background-color:yellow;
}

.image{
  float:left;
  width:100px;
  height:100px;
  border: solid 1px;
}
.details{
  float:left;
  margin-left:5px;
}

＆＃13;

<div class="first"></div>
<div class="container">
  <div class="image"></div>
  <div class="details">
    Total Posts: 1
    <br>
    Reputation: 0
    <br>
    Referrals: 0
  </div>
</div>

＆＃13;

祝你好运！

Answer 2

<div>    Etharas    <div>
<div>
    <div style="float:left; width: 49%">
    <img src="xyz.png">
    <div>
    <div style="float:right; width: 49%">
    Total Post:1
    <br/>
    Reputation:0
    <div>
</div>

Answer 3

试一试。一切都与你如何组织你divs有关。我个人使用divs来获取容器和内容。这样我就可以更轻松地使用flexbox并按照我想要的方式整理我的内容。使用justify-content非常简单; flex-direction等等。有关它的更多信息，请here

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .content {
      width: 250px;
      height: 200px;
      display: flex;
      border: 10px rgba(0, 0, 0, 0.2) solid;
    }

    .container {
      padding: 10px;
      width: 100%;
    }

    .stats-container {
      display: flex;
      width: 100%;
    }
    img{
      padding-right: 10px;
    }
    .stats-content {
      display: flex;
      flex-direction: column;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="container">
      <div class="user">
        <div class="name">Etharas</div>
        <div class="role">administrator</div>
        <div class="rating"> * * * * * * *</div>
        <div class="stats-container">
          <img src="http://www.fillmurray.com/100/100" alt="fill">
          <div class="stats-content">
            <div class="total-posts">Total Posts :1</div>
            <div class="Reputation">Reputation: 0</div>
            <div class="referals">Referals: 0</div>
          </div>

        </div>

      </div>
    </div>

    <!-- Full Width Responsive Slider -->
  </div>

</body>

</html>

＆＃13;

Answer 4

尝试使用css：

div#holderOfText{
  position:relative;
  top:**px;
  left:**px;
}

如何在div中移动较低的文本？

4 个答案: