如何並排排列這些元素（html/css）？

我有在調整並排這些元素方面的困難

，反正this是它的外觀，到目前爲止，但我希望它看起來像this 如何並排排列這些元素（html/css）？

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

來源

2017-03-29 Bom

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>

幫助視覺引導

來源

2017-03-29 01:34:47

謝謝！這幫了我:) – Bom

@Bom歡迎:) –

請在CSS &檢查添加

img { 
    float: left; 
}

我沒有運行代碼。

來源

2017-03-29 01:32:47 Len

對不起，但是不是將他的頁面上的每個圖像浮動到左邊？ –

是的。你是對的，但提供了有關這個問題的解決方案。如果有多個，那麼這是解決方案.starsrev {padding-left：2.8em;向左飄浮; } – Len

你可以嘗試漂浮它們。那是我通常做的。

.commbutton{ 
float:left; 
} 

.commentry{ 
float:left; 
}

來源

2017-03-29 01:33:50 lhavCoder

應用float:left到要顯示在左側，應用float: right對於一個在右邊顯示的股利。這是一個起點。根據結果，您可能必須將它們更改爲inline。

希望這會有所幫助。

來源

2017-03-29 01:38:55

如何並排排列這些元素（html/css）？

回答

相關問題