Question

我试图在它旁边浮动一个图像和两个元素（两个单独的线上的两个元素）。我尝试使用display：inline-block，这样两个元素中的每一个都在一个单独的行上，但没有运气。此外，“品牌”应该在“模型”的顶部，因此首先是梅赛德斯和第二个W126。是否有可能实现这一目标？

在这里摆弄...... Fiddle

HTML：

<div class="car"><img alt="" src=
       "http://placehold.it/50x50&text=CAR"></div>

    <div class="brand">
        Mercedes
    </div>

    <div class="model">
        W126
    </div>

CSS：

.car img {
    max-width:100%;
    max-height:100%;
    margin:0;
    display:block;
}

.brand {
    font-size:16px;
    color:#333333;
    font-family:'Droid Serif';
    font-weight:bold;
    padding-left:10px;
    padding-bottom:0px;
    padding-top:5px;
    float:left;
    margin-left:2px;
    margin-right:2px;
    margin-top:2px;
    display:inline-block;
}

.model {
    font-size:12px;
    color:#5A5A5A;
    font-family:'Droid Serif';
    font-style:normal;
    margin-left:2px;
    margin-right:2px;
    margin-bottom:2px;
    padding-left:10px;
    float:left;
    display:inline-block;
}

Answer 1

如果您更改HTML＆amp; CSS有点：

.car {
    display:inline-block;
}

.car img {
    max-width:100%;
    max-height:100%;
    margin:0;
    display:inline-block;
    vertical-align:middle;
}

.car .makeAndModel {
    margin:0 0 0 5px;
    font-family:'Droid Serif';
    display:inline-block;
    vertical-align:middle;
}

.brand {
    font-size:16px;
    color:#333333;
    font-weight:bold;
    display:block;
}

.model {
    font-size:12px;
    color:#5A5A5A;
    font-style:normal;
    display:block;
}

<div class="car">
     <img alt="" src="http://placehold.it/50x50&text=CAR" />
      <div class="makeAndModel">
            <div class="brand">
                Mercedes
            </div>			
			<div class="model">
                W126
            </div>
     </div>
</div>

Answer 2

您可以使用一些浮点数：

.car img {
    max-width:100%;
    max-height:100%;
    margin:0;
    float:left;
}
.brand {
    font-size:16px;
    color:#333333;
    font-family:'Droid Serif';
    font-weight:bold;
    padding-left:10px;
    padding-bottom:0px;
    padding-top:5px;
    margin-left:52px;
    margin-right:2px;
    margin-top:2px;
}
.model {
    font-size:12px;
    color:#5A5A5A;
    font-family:'Droid Serif';
    font-style:normal;
    margin-left:2px;
    margin-right:2px;
    margin-bottom:2px;
    padding-left:10px;
    float:left;
}

<div class="car">
    <img alt="" src="http://placehold.it/50x50&text=CAR">
</div>
<div class="brand">Mercedes</div>
<div class="model">W126</div>

请注意，.brand没有浮动，允许将W126推到它下面的线上，并且边距已经增加到适当的空间。

1个图像和两个元素紧挨着它

2 个答案: