Отображение 1 текстового поля и 3 изображений в одной строке

Question

Отображение 1 текстового поля и 3 изображений в одной строке

0

Интересно, могу ли я отображать 1 текстовое поле и 3 изображения в одной строке? Все изображения одного размера. Если возможно, и мне бы идеально понравился какой-то текст под каждым изображением?

heres код:

      <div class="row">
    <div class="side-bar">
        <h3> Recent Work </h3>
        <p>Here 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;
}

Я искал в Интернете, но пока не везет. заранее спасибо.

user3087394 16 апр. 2014, в 16:20

Источник

0

У вас есть какие-то особые требования к браузеру, такие как IE7 или что-то еще?
Borys Generalov 16 апр. 2014, в 14:21
0

Я полагаю, вы ищете display:inline-block или float: left
Praxis Ashelin 16 апр. 2014, в 14:22

Теги:

html

css

row

5 ответов

Ещё вопросы

У вас есть какие-то особые требования к браузеру, такие как IE7 или что-то еще?
Я полагаю, вы ищете display:inline-block или float: left

Chip · Answer 1 · 2014-04-16T12-35-00.000Z

Существует несколько способов сделать это, один пример - поместить два дочерних элемента:

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

Это будет работать только в том случае, если для родительского элемента достаточно места для .side-bar .recent-wrap и .recent-wrap чтобы сидеть рядом друг с другом.

Пример: http://jsbin.com/poxox/1/edit

Я всегда всегда предпочитаю отображение: inline-block вместо float, но оба работают.
Это работает, спасибо. Еще одна вещь, как я могу добавить текст под каждым изображением?
@ user3087394, когда добавляешь текст, ты собираешься понять, почему float может быть кошмаром
@ScottSelby Так как я могу этого добиться
Поплавки @ScottSelby требуют надлежащей clear . С любым инструментом вам нужно знать, как его использовать.
@ user3087394 Добавьте текст, если хотите. Я предпочитаю котят, хотя.
@CarrieKendall, правда, конечно, но когда кто-то здесь задает вопрос такого типа, вы можете принять его уровень в CSS, и вместо того, чтобы тратить некоторое время на чтение по float и очистке, вы можете просто использовать inline-block

Borys Generalov · Answer 2 · 2014-04-16T13-37-00.000Z

Вот пример с текстовыми полями ниже изображения: пример

Mr_Green · Answer 3 · 2014-04-16T13-14-00.000Z

Попробуй это:

 .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 */
 }

Рабочий скрипт

Этот подход позволяет второму контейнеру оставаться в очереди с первым контейнером, даже если размер окна мал.

Сначала я предложил с display: table-cell который совсем не годится, потому что элементы теряют контроль над высотой.

Nick · Answer 4 · 2014-04-16T12-27-00.000Z

CSS:

.row {
   width: 250px
}

http://jsfiddle.net/3DCSd/

Scott Selby · Answer 5 · 2014-04-16T12-13-00.000Z

Вот рабочая скрипка

.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 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>