css - 在同一行显示 1 个文本框和 3 个图像

Question

想知道我是否可以在同一行显示 1 个文本框和 3 个图像？所有图像大小相同。如果可能的话，我还希望在每张图片下方添加一些文字？

代码如下:

      <div class="row">
    <div class="side-bar">
        <h3> Recent Work </h3>
        <p>Here's some of my latest work, covering web design, branding and identity.</p>
        <a href="#">View the Portfolio &rarr;</a>
    </div>

<div class="recent-wrap">
    <a href="#"><img src="img/body-metrix.png"></a>
    <a href="#"><img src="img/body-metrix-logo.png"></a>
    <a href="#"><img src="img/market.png"></a>
</div>
</div>



.row {
    display: inline;
    float: left;
}
.side-bar {

    padding: 10px;
    background-color: #f3f3f3;
    height: 200px;
    width: 250px;
}

.side-bar h3 {
    font-weight: bold;
    font-size: 19px;
    margin-bottom: 5px;
}

.side-bar p {
    font-size: 14px;

}

.side-bar a {
    font-size: 13px;
}


.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}

我在互联网上搜索过，但还没有成功。 提前致谢。

Answer 1

有很多方法可以做到这一点，一个例子是 float 两个子元素:

.side-bar, .recent-wrap {
    float: left;
}

这只有在父元素上有足够的空间让 .side-bar 和 .recent-wrap 彼此相邻时才有效。

示例:http://jsbin.com/poxox/1/edit