Question

我难以并排排列这些元素，无论如何this是它到目前为止的样子，但我希望它看起来像this

HTML：

<div class="commsec">
  <div class="commbutton">
    <button class="reviewprofile"><img src="img/reviewprofile.png">  </button>
  </div>

  <div class="commentry">
    <p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
    <img class="starsrev" src="img/stars.png" alt="stars" />
  </div>
</div>

CSS：

.reviewprofile {
  background-color: transparent;
  border: none;
  margin-top: 5em;
}

.reviewentry {
  display: inline-block;
  font-family: 'Abhaya Libre', Times, Serif;
  font-size: 0.8em;
  font-weight: 400;
  color: #5e5e5e;
  text-align: left;
  padding-left: 3.5em;
  margin: 0;
}

.commbutton button {
  float: left;
}

.starsrev {
  padding-left: 2.8em;
}

Answer 1

请在CSS＆amp;下添加检查

img {
    float: left;
}

我没有运行代码。

Answer 2

你可以尝试浮动它们。这就是我通常做的事情。

.commbutton{
 float:left;
 }

 .commentry{
 float:left;
 }

Answer 3

父级上的

flex将使用现有标记创建此布局。以下是语法/选项https://css-tricks.com/snippets/css/a-guide-to-flexbox/

帮助的可视化指南

.reviewprofile {
  background-color: transparent;
  border: none;
}

.reviewentry {
  font-family: 'Abhaya Libre', Times, Serif;
  font-size: 0.8em;
  font-weight: 400;
  color: #5e5e5e;
  text-align: left;
  margin: 0;
}

.commsec {
  display: flex;
  align-items: center; /* this will affect vertical alignment */
}

<div class="commsec">
  <div class="commbutton">
    <button class="reviewprofile"><img src="http://cdn.quilt.janrain.com/2.1.2/profile_default.png">  </button>
  </div>

  <div class="commentry">
    <p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
    <img style="max-width: 100px" class="starsrev" src="http://www.moviesmacktalk.com/news/wp-content/uploads/2013/11/2.5-Stars.jpg" alt="stars" />
  </div>
</div>

Answer 4

将float:left应用于您要在左侧显示的div，并将float: right应用于右侧显示的那个。这是起点。根据结果，您可能需要将它们更改为inline。

希望这有帮助。

如何并排排列这些元素（html / css）？

4 个答案: