어떻게 이러한 요소를 나란히 정렬 할 수 있습니까 (html/css)?

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

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 2

CSS & 검사에서 추가하십시오

img { 
    float: left; 
} 

코드를 실행하지 않았습니다.

Answer 3

그들을 부유시킬 수 있습니다. 내가 평상시에하는 일이야.

.commbutton{ 
float:left; 
} 

.commentry{ 
float:left; 
} 

Answer 4

가 왼쪽에 표시하고 오른쪽에 표시되는 하나 float: right을 적용 할 DIV에 float:left을 적용합니다. 이것이 출발점입니다. 결과에 따라 inline으로 변경해야 할 수도 있습니다.

희망이 도움이됩니다.