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

Answer 2

试试这个：

 .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

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

Answer 3

CSS：

.row {
   width: 250px
}

http://jsfiddle.net/3DCSd/

Answer 4

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>

Answer 5

以下是图片下方文本框的示例：example

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

5 个答案: