如何并排排列这些元素（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）？

回答

相关问题