How can I align these elements side by side?

问题

I'm having difficulties in aligning these elements side by side, anyway this—

—is how it looks so far, but I want it look like this:

.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;
}

<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>

回答1:

flex on the parent will create this layout with your existing markup. Here's a visual guide for help with syntax/options 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>

回答2:

you can try floating them. thats what i usually do.

.commbutton{
 float:left;
 }

 .commentry{
 float:left;
 }

回答3:

Apply float:left to the div which you want to show on the left and apply float: right for the one to be shown on the right. That's the starting point. Based on results you may have to change them to be inline too.

回答4:

Please add under CSS & check

img {
    float: left;
}

I didn't run the code.

来源：https://stackoverflow.com/questions/43082674/how-can-i-align-these-elements-side-by-side

标签

html

css