Question

我想让一个div与图像在同一行上与另一个div相同，允许其他div在右侧堆叠在一起？

这是我用我想要实现的目标创建的图像。谢谢： http://postimg.org/image/82fg886hb/

<div class="media">
      <div style="display:inline">
        <img src="images/sample.png" width="92px" height="135px" >
      <div>
      <div style="display:inline;" > Points: 1422</div>
      <div style="display:inline;"> Level: 17</div>
      <div style="display:inline;">
        <img src="images/experienceBar.png" >
      </div>
    </div><!-- End div .media -->

Answer 1

你应该添加宽度并将其浮动

e.g

<style>
    .cls_my{
        float:left;
        width:300px;
    }
</style>
<div style="display:inline;" class ='cls_my' > Points: 1422</div>
      <div style="display:inline;" class='cls_my'> Level: 17</div>

Answer 2

您可以使用float来更改元素流。这是一个例子：

＆＃13;

.media .container {
    overflow: hidden;
}
.media .container img,
.media .container .side {
    float: left;
    margin-right: 10px;
}

＆＃13;

<div class="media">
    <div class="container">
        <img src="http://placehold.it/100x200" width="92px" height="135px" />
        <div class="side">
            <div>Points: 1422</div>
            <div>Level: 17</div>
            <div>
                <img src="http://placehold.it/100x40" />
            </div>
        </div>
    </div>
</div>

＆＃13;

Div内有两个相同大小的div（img里面）

2 个答案: