Div не отображается встроенный

Question

У меня есть контейнер с двумя основными элементами. Заголовок и тело. В заголовке div я хочу 50px на 50px изображение и имя пользователя рядом с ним, но я не могу заставить имя пользователя отображаться в строке. Что я делаю не так? http://jsfiddle.net/FqW9d/14/

Answer 1

Добавить поплавок: слева для обоих элементов. Как:

#story-teller-head-contain img{ 
    float: left; 
    /* your other styling */ 
} 

#story-teller-head-contain h1 { 
    float: left; 
    /* your other styling */ 
} 

Answer 2

Добавить поплавок слева изображения и DIV, содержащий имя, я обновил ваш jsFiddle здесь http://jsfiddle.net/FqW9d/15/

Answer 3

вы можете использовать inline-block вместо inline для div с именем пользователя или float бота img и `дел.

Demo с inline-block: http://jsfiddle.net/FqW9d/16/

Демо с float: http://jsfiddle.net/FqW9d/17/

Answer 4

Встроенный дисплей может быть немного боли. Способ перекрестного браузера, как это сделать.

/* Older version of FF */ 
display: -moz-inline-stack; 

/* newer versions of FF and Webkit */ 
display: inline-block; 

/* trigger the correct behaviour in IE */ 
zoom:1; 

/* IE */ 
*display: inline; 

Вам необходимо объявить стиль греха этим заказом.

Answer 5

Вы получили следующую структуру (я добавил изображение URL, чтобы мы могли видеть, что элемент):

<div id="story-teller-head-contain"> 
    <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/> 
    <div id="client-name"> 
     <h1> Matt Morris </h1> 
    </div> 
</div> 

В div элементы и h1 все блочные элементы по умолчанию. Однако все, что вам нужно сделать, это float: left элементы img и #client-name, и они будут течь слева до их ширины (которую вы объявляете), не заставляя следующий элемент течь ниже.

#story-teller-head-contain img { 
    float: left; 
    height: 50px; 
    width: 50px; 
} 

#client-name { 
    float: left; 
    height: 50px; 
    width: 200px; 
} 

#story-teller-head-contain h1 { 
    margin: 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    font-family: 'helvetica neue', arial, sans-serif; 
    font-size: 12px; 
    color: #3B5998; 
} 

http://jsfiddle.net/FqW9d/21/

Так что вы на самом деле не ищет display: inline, который попытается показать, как «встроенный текст» элемента отображается (например, как этот пункт текста); что вы хотите для img и #client-name элементов, чтобы не «заставлять clear после». Ваш display: inline - это то, что позволяет h1, который является элементом уровня блока, нарушить отображение, поскольку он переопределяет display: inline родительского элемента.

В самом деле, если вы проверяете с Firebug или Chrome консоли, вы увидите выше вычисляет как float: left и display: block, несмотря на то, display: block не был явно объявлен.

См:

• http://www.w3.org/TR/CSS2/visuren.html#floats
• http://www.alistapart.com/articles/css-floats-101/
• http://www.quirksmode.org/css/clearing.html
• http://css-tricks.com/all-about-floats/

Answer 6

Как и все остальные говорит сделать образ и человек имя float: left; http://jsfiddle.net/FqW9d/20/

Кстати, мне очень нравится, что вы создали здесь. Так что я перепутались с источником некоторого: http://jsfiddle.net/FqW9d/22/

Answer 7

I feel its better to use - 

img{ 
    float:left; 
} 
#client-name{ 
    display: table-cell; 
    zoom:1;/*For IE only*/ 
} 

Вы не должны указывать ширину, как и в методе поплавка. Он будет автоматически размещать текст с переменной длиной.

Я обновил свой код - http://jsfiddle.net/FqW9d/27/

Но я думаю, что ваша структура & CSS может быть гораздо более проще. Поскольку я не знаю о цели, оставил ее нетронутой.