如何将这些图像放置在右侧？

Question

我有一个网站，用户可以在其中评分1到5颗星，结果显示在条形图上。代码如下：

.ratings-container {
  /*background-color: orange;*/
  font-family: tahoma;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

.ratings-container h3 {
  padding-bottom: 20px;
}

.graph-container {
/*  background-color: blue;*/
  width: 66%;

}

.graph {
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  width: 100%;
  /*background-color: red;*/
}

.graph div {
  width: 12%;
  height: 1px;
  background-color: black;
}

.counters {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.label-container {
  width: 98%;
  /*background-color: green;*/
}

#fivestar {
  float: left;
  /*display: inline;*/
}

#onestar {
  float: right;
  /*display: inline;*/
}

.star-container {
  width: 25%;
  /*background-color: blue;*/
  margin-top: 100px;
  font-size: 0;
}

.star {
  width: 50px;
  height: auto;
  cursor: pointer;
  transition: 0.3s;
}

#feedback-thanks {
  display: none;
  transition: 0.5s;
  padding-top: 20px;
}

<div class="ratings-container">
    <h3 style="font-family: Georgia" id="ratings-heading">RATE YOUR STAY</h3>
    <div class="graph-container">
      <div class="graph">
        <div id="bar5"></div>
        <div id="bar4"></div>
        <div id="bar3"></div>
        <div id="bar2"></div>
        <div id="bar1"></div>
      </div>
      <div class="counters">
        <h3 id="c5">0</h3>
        <h3 id="c4">0</h3>
        <h3 id="c3">0</h3>
        <h3 id="c2">0</h3>
        <h3 id="c1">0</h3>
      </div>
      <div class="label-container">
        <h2 id="fivestar">5 star</h2>
        <h2 id="onestar">1 star</h2>
      </div>
    </div>
     <div class="star-container">
      <img class="star" id="star1" src="./star.jpg">
      <img class="star" id="star2" src="./star.jpg">
      <img class="star" id="star3" src="./star.jpg">
      <img class="star" id="star4" src="./star.jpg">
      <img class="star" id="star5" src="./star.jpg">
    </div>
    <h3 id="feedback-thanks">Thanks for your feedback!</h3>
  </div>

但是，我无法将图像定位在底部（星状）。我希望它们位于条形图的右侧，而不是在条形图的下方。我试图将它们从“评级-容器” div中删除，并使其内联元素，但无济于事。

Answer 1

您可以使用flexbox轻松实现。我已经记录了CSS代码中的更改。

可以更改

Vertical alignment的flexbox项。

.ratings-container {
  /*background-color: orange;*/
  font-family: tahoma;
  padding-top: 50px 0 50px 50px;
  display: flex; /* Added */
  flex-wrap: wrap; /* Added */
}

.ratings-container h3 {
  padding-bottom: 20px;
  width: 100%;
}

.graph-container {
  /*  background-color: blue;*/
  width: 66%;
}

.graph {
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  width: 100%;
  /*background-color: red;*/
}

.graph div {
  width: 12%;
  height: 1px;
  background-color: black;
}

.counters {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.label-container {
  width: 98%;
  /*background-color: green;*/
}

#fivestar {
  float: left;
  /*display: inline;*/
}

#onestar {
  float: right;
  /*display: inline;*/
}

.star-container {
  width: 25%;
  /*background-color: blue;*/
  margin-top: 100px;
  font-size: 0;
}

.star {
  width: 50px;
  height: auto;
  cursor: pointer;
  transition: 0.3s;
}

#feedback-thanks {
  display: none;
  transition: 0.5s;
  padding-top: 20px;
}

<div class="ratings-container">
  <h3 style="font-family: Georgia" id="ratings-heading">RATE YOUR STAY</h3>
  <div class="graph-container">
    <div class="graph">
      <div id="bar5"></div>
      <div id="bar4"></div>
      <div id="bar3"></div>
      <div id="bar2"></div>
      <div id="bar1"></div>
    </div>
    <div class="counters">
      <h3 id="c5">0</h3>
      <h3 id="c4">0</h3>
      <h3 id="c3">0</h3>
      <h3 id="c2">0</h3>
      <h3 id="c1">0</h3>
    </div>
    <div class="label-container">
      <h2 id="fivestar">5 star</h2>
      <h2 id="onestar">1 star</h2>
    </div>
  </div>
  <div class="star-container">
    <img class="star" id="star1" src="./star.jpg">
    <img class="star" id="star2" src="./star.jpg">
    <img class="star" id="star3" src="./star.jpg">
    <img class="star" id="star4" src="./star.jpg">
    <img class="star" id="star5" src="./star.jpg">
  </div>
  <h3 id="feedback-thanks">Thanks for your feedback!</h3>
</div>

Answer 2

尝试使包含星星的div与上一个div内联。