размещение текста рядом с изображением с использованием встроенных блоков

Question

Я хочу использовать функцию встроенного блока, чтобы все реагировать, но я столкнулся с проблемой.

Проблема в том, что мое фоновое изображение не отображается, и они не являются горизонтальными (бок о бок), а не как они теперь сложены друг на друга. Что мне не хватает?

Я быстро воссоздал меня проблема здесь:

Fiddle

HTML:

<section> 
        <div class="first"> 
         <p>hello this is some text</p><p>and here is some more text </p> 
        <div class="ipad"></div> 
        </div> 
       </section> 

CSS:

.first { 
    display: inline-block; 
} 

.ipad { 
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat; 
    display: inline-block; 
    border: 1px solid #333; 
} 

я, вероятно, отсутствует что-то довольно простое, у меня много Google, и я все еще в растерянности.

Answer 1

2 вещи ..

1. Если вы хотите, чтобы ваши пункты <p> прийти рядный, вам нужно добавить inline-block к ним, а не их родителей:

   .first p{ 
       display: inline-block; 
   } 
   

2. Ваше изображение будет показывать если вы укажете его высоту и ширину в стиле div.

   .ipad { 
       background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat; 
       display: inline-block; 
       border: 1px solid #333; 
       height:100px; //<- provide height 
       width:100px; //<- provide width 
   } 
   

EDIT: Чтобы все ваши дети не приходят в линию, независимо от того, насколько широко они, использовать это на своих родителей .first:

.first{ 
    white-space:nowrap; 
} 

Обновлено скрипку:

http://jsfiddle.net/NQ4Yv/2/

Answer 2

вы можете использовать

p { 
    float: left 
} 

для бок о бок параграфов.

Answer 3

Прежде всего, в заказ на Ipad изображение появится, вам нужно дать Див измерение:

.ipad { 
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat; 
    display: inline-block; 
    border: 1px solid #333; 
    width: 220px; 
    height: 274px; 
} 

Затем установите float:left или display:inline-block на <p>, чтобы заставить их двигаться рядом друг с другом:

.first p{ 
    display: inline-block; 
} 

см скрипку : http://jsfiddle.net/NQ4Yv/3/

Если вы хотите, чтобы фоновое изображение позади параграфов, то сделать что-то вроде этого:

.first{ 
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat; 
    display: inline-block; 
    border: 1px solid #333; 
    width: 220px; 
    height: 274px; 
    padding: 0 20px; 
} 
.first p{ 
    display: inline-block; 
    color: white; 
} 

обновлена ​​скрипка: http://jsfiddle.net/NQ4Yv/4/