将元素垂直放置在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中的所有元素都应并排放置。 我想要这样的输出。

Hai你好（和图片）

这个怎么做？ 我已在此处附加了演示文件

Answer 1

您正在应用float：left; 整个div 如果要应用于<p>标记，请执行以下操作：

 #identity1 p
  {
    float:left;
  }

或者，您可以为p和img标记赋予identify1类，以使其全部向左浮动。

或者，您可以使用*将左浮点数应用于所有子元素：

#identity1 *
{
  float:left;
}

这是示例： https : //jsfiddle.net/rzwscvke/然后，您可能还想向所有对象添加边距，或者您可以根据需要的效果使用display：inline或display：inline-block。

Answer 2

您可以将display:inline用于p和img标签

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

Answer 3

只需添加：

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

Answer 4

您需要使用

display:inline 

用于p和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>