Размещение элементов внутри DIV в прямой

Question

HTML код

<div id="identity1"> 
    <p> 
    Hai 
    </p> 
    <p> 
    How are you 
    </p> 
    <img src="http://lmsotfy.com/so.png" width="200px"> 
</div> 

CSS код

#identity1 
    { 
    float:left; 
    } 

Я хочу, чтобы все элементы внутри DIV должны быть расположены бок о бок. Я хочу, чтобы на выходе что-то вроде этого.

Хай Как вы (и изображение)

Как это сделать? Я приложил демо-файл here

Answer 1

Вы применяете float: left; на весь div. Если вы хотите применить к <p> тегов, то сделать:

#identity1 p 
    { 
    float:left; 
    } 

Или вы могли бы дать р и IMG теги класс identify1 вместо того, чтобы сделать их все поплавка влево.

Или вы могли бы сделать это, чтобы применить поплавок влево для всех дочерних элементов с помощью *:

#identity1 * 
{ 
    float:left; 
} 

Вот пример: https://jsfiddle.net/rzwscvke/ Вы можете также то хотите добавить поля слишком или вы могли бы просто использовать дисплей: встроенный или дисплей: встроенный блок в зависимости от желаемого эффекта.

Answer 2

Вы можете использовать display:inline для р и IMG тег

#identity1 p, 
#identity1 img { 
    display:inline; 
    vertical-align:middle; 
    } 

Answer 3

Просто добавьте:

#identity1 
{ 
    float:left; 
} 
p{ 
    display:inline; 
} 

Answer 4

Вы должны использовать

display:inline 

для р и Img тегов.

Я вставил код в https://jsfiddle.net/v121v6kL/

Answer 5

просто сделать все из них встроенного блока

#identity1 * { 
 
    display: inline-block 
 
}

<div id="identity1"> 
 
    <p> 
 
    Hai 
 
    </p> 
 
    <p> 
 
    How are you 
 
    </p> 
 
    <img src="http://lmsotfy.com/so.png" width="200px"> 
 
</div>

Answer 6

что-то вроде этого?

#identity1 p { 
 
    float:left; 
 
    margin:0px 2px; 
 
    
 
}

<div id="identity1"> 
 
    <p> 
 
    Hai 
 
    </p> 
 
    <p> 
 
    How are you 
 
    </p> 
 
    <img src="http://lmsotfy.com/so.png" width="100px" height="40px;"> 
 
</div>