在同一行显示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

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

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

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

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