在同一行显示 1 个文本框和 3 个图像答案

【问题标题】：Displaying 1 text box and 3 images on the same row在同一行显示 1 个文本框和 3 个图像
【发布时间】：2014-04-16 14:19:31
【问题描述】：

想知道我是否可以在同一行显示 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;
}

我已经搜索了互联网，但还没有运气。提前致谢。

【问题讨论】：

您有什么特定的浏览器要求，例如 IE7 或其他什么？
相信你在找display:inline-block或float: left

标签： css html row

【解决方案1】：

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

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

这只有在父元素上有足够的空间让.side-bar 和.recent-wrap 并排放置时才有效。

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

【讨论】：

我总是更喜欢 display: inline-block 而不是 float，但两者都可以。
那行得通，谢谢。还有一件事，如何在每张图片下方添加文字？
@user3087394，在添加文本时，你会想知道为什么浮动可能是一场噩梦
@ScottSelby float 永远是最好的
@ScottSelby 浮动需要正确的clearing。使用任何工具，您都需要知道如何使用它..

【解决方案2】：

CSS：

.row {
   width: 250px
}

http://jsfiddle.net/3DCSd/

【讨论】：

【解决方案3】：

Here Is a working Fiddle

.row {
    display: inline-block; /* changed to inline-block, you don't need
                              inline and float */       
}   

.recent-wrap a {   /*changed to a , since your images are wrapped in <a> */
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}

CSS 的其余部分保持不变

和 HTML 我刚刚添加的文本框

<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">
     <input type="text" id="ss" />
     <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>

【讨论】：

【解决方案4】：

试试这个：

 .side-bar {
     padding: 10px;
     background-color: #f3f3f3;
     height: 200px;
     width: 250px;
     float: left;       /* added */
 }

 .recent-wrap {
     margin-left: 270px;        /* added (padding + width) of side-bar */
 }

Working Fiddle

这种方法让第二个容器与第一个容器保持一致，即使窗口很小。

【讨论】：

我首先建议使用display: table-cell，这根本不是一个好选择，因为元素失去了对高度的控制..

【解决方案5】：

下面是带有文本框的示例：example

【讨论】：