Question

The image of the snowball should be in the topright corner. And i want 3 of them under each other

我试过浮动吧。但是它就像在div中那样。当我把playerumm div放在第一位时，它会出现在右上角。但当我做其中3个。他们会彼此相邻，彼此相邻，

html

<div class="playerInfo">
    <div class="playerChamp">
        <img src="profileIcon10.jpg" width="100" height="100" >
    </div>
    <div class="playerName">
        <label for="male">Male</label>
    </div>
    <div class="playerSumm">
        <img src="summ.png" width="40" height="40" >
    </div>
</div>

的CSS

.playerInfo {
      height:120px;
      width:140px;
      background:blue;
        border:solid 1px black;
         position: relative;
  }

  .playerChamp {
  width:100px;
  height:100px;
  background :red;
}

  .playerSumm {
  width:40px;
  height:40px;
  background :green;
  float : right;
  display:inline-block

}

  .playerName {
  width:100px;
  height:20px;
  background :red;
}

Answer 1

首先将div放在班级playerSumm上。像这样：

<div class="playerInfo">
    <div class="playerSumm">
        <img src="summ.png" width="40" height="40" >
    </div>
    <div class="playerChamp">
        <img src="profileIcon10.jpg" width="100" height="100" >
    </div>
    <div class="playerName">
        <label for="male">Male</label>
    </div>
</div>

Answer 2

检查一下：

  <div style="border:1px solid black; width:140px; height:120px; background:blue; overflow:hidden">
    <!-- left part with image and name -->
    <div style="float:left">
      <img src="profileIcon10.jpg" style="width:100px; height:100px; display:block" />
      <div style=" width:100px; height:20px; background :red;">MALE</div>
    </div>
    <!-- right part with snowballs -->
    <div style="float:left">
      <div style="width:40px; height:40px; background :green;">
        <img src="summ.png" style="width:40px; height:40px;"/>
      </div>
      <div style="width:40px; height:40px; background :green;">
        <img src="summ.png" style="width:40px; height:40px;"/>
      </div>
      <div style="width:40px; height:40px; background :green;">
        <img src="summ.png" style="width:40px; height:40px;"/>
      </div>
    </div>
  </div>

Answer 3

在你的代码中，我可以找出以下几个错误：

对于您的父div playerInfo，您已设置border属性。 div元素的总宽度为140px - 2px = 138px，因为边框宽度包含在width中。所以你需要使用box-sizing: content-box;这是主要错误所在。
您必须使用display: inline-block;作为playerName div。
您必须为float: left; div。

playerChamp

以下是fiddle

<强> HTML

<div class="playerInfo">
  <div class="playerChamp">
    <img src="profileIcon10.jpg" width="100" height="100">
  </div>
  <div class="playerSumm">
    <img src="summ.png" width="40" height="40">
  </div>
  <div class="playerSumm">
    <img src="summ.png" width="40" height="40">
  </div>
  <div class="playerSumm">
    <img src="summ.png" width="40" height="40">
  </div>
  <div class="playerName">
    <label for="male">Male</label>
  </div>

</div>

<强> CSS

.playerInfo {
  height: 120px;
  width: 140px;
  background: blue;
  box-sizing: content-box;
  border:solid 1px black;
  //position: relative;
}

.playerChamp {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.playerSumm {
  width: 40px;
  height: 40px;
  background: green;
  float: right;
  display: inline-block
}

.playerName {
  width: 100px;
  height: 20px;
  background: red;
  display: inline-block;
}

需要帮助在另一个div内对齐div。需要他们在右侧

3 个答案: