在同一行顯示1個文本框和3個圖像

想知道是否可以在同一行顯示1個文本框和3個圖像？所有的圖像都是相同的大小。如果可能的話，我最好還是喜歡每張圖片下面的文字？在同一行顯示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; 
}

香港專業教育學院在網上搜索，但沒有運氣尚未。在此先感謝。

來源

2014-04-16 user3087394

你有任何特定的瀏覽器要求，如IE7或其他？ –

我相信你正在尋找'display：inline-block'或'float：left' –

試試這個：

.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

這種做法讓第二容器留在符合即使窗口尺寸較小的第一個容器。

來源

2014-04-16 14:24:06

我第一次用'display：table-cell'建議，它並不是一個好的選擇，因爲元素失控高度.. –

CSS：

.row { 
    width: 250px 
}

http://jsfiddle.net/3DCSd/

來源

2014-04-16 14:24:07 Nick

有許多方法可以做到這一點，一個例子是浮動的兩個子元素：

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

這將只有當工作父元素上有足夠的空間用於.side-bar和.recent-wrap坐在一起。

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

來源

2014-04-16 14:25:32 Chip

我總是總喜歡顯示：inline-block over float，但兩者都可以工作。 –

多數民衆贊成在工作，謝謝。還有一件事，我如何在每張圖片下面添加文字？ – user3087394

@ user3087394，當你添加文本你gonig，看看爲什麼浮動可以是一場噩夢 –

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>

來源

2014-04-16 14:26:50

下面是示例與下面的圖像文本框：example

來源

2014-04-16 14:45:22

在同一行顯示1個文本框和3個圖像

回答

相關問題