在 'div' 中显示文本和图像答案

【问题标题】：Display text and image inside 'div'在 'div' 中显示文本和图像
【发布时间】：2014-12-03 16:56:40
【问题描述】：

我正在尝试在 div 内显示图像并在图像下方显示文本。如果我设置图像属性浮动：左，文本显示在同一行。我想在中心的下一行显示文本。

.group1 {
  border: 2px solid black;
  width: 180px;
  height: 180px;
  text-align: center;
  display: inline-block;
  font-family: "Open Sans";
}
.title {
  font-size: 14px;
}
img {
  float: left;
}

<div class='group1'>
  <p> <span> <img src='img1.png'> </span>
  </p>
  <p> <span class='title'> First </span>
  </p>
  <p> <span> second </span>
  </p>
</div>

如何在中心的下一行显示文本'First'？图片应该出现在 div 的左侧

【问题讨论】：

如果你知道布局是因为float: left而破坏的，那你为什么要使用它？如果您想使图像左对齐，请使用display: block 而不是float: left。
我想先显示图片，下一行显示文字。
我使用了 display:block 和 clear:both，文本显示在下一行:)

标签： html css

【解决方案1】：

使用时不要忘记清除浮动。你可以google一下clearfix。在大多数情况下，我们可以将overflow:hidden; 用于父级。

.group1 {
  border: 2px solid black;
  width: 180px;
  height: 180px;
  text-align: center;
  display: inline-block;
  font-family: "Open Sans";
}
.title {
  font-size: 14px;
}
img {
  float: left;
}
.group1 > p:first-child{
  overflow: hidden;
  }

<div class='group1'>
  <p> <span> <img src='img1.png'> </span>
  </p>
  <p> <span class='title'> First </span>
  </p>
  <p> <span> second </span>
  </p>
</div>

【讨论】：

我个人意见：我不向任何开发者推荐overflow: hidden。因为它是一个快速修复它是hackish。我建议使用你提到的 clearfix。
所以，我已经提到了 clearfix。 OP应该对此进行研究。在这里我们可以提供帮助。
如果没有设置高度，overflow:hidden;是我个人的选择。快速修复，效果更好。

【解决方案2】：

使用display:block 以便将您的跨度元素视为块元素。另外，请使用clear:both，这样您的元素就不会受到浮动元素的影响。

 .title {
font-size: 14px;
display:block;
clear:both;
}

DEMO

【讨论】：

p 已经是块元素了，为什么span需要设置块级元素呢？它妨碍了布局。
谢谢。图片首先显示，文本显示在下一行。
我将删除跨度。
@Bhojendra-C-LinkNepal 我知道，但包含.title 的<p> 没有从浮动中清除。正确的方法是先清除<p>，但他给了span 类和样式。
我在 span 内给出了样式。

【解决方案3】：

将 p 宽度设置为 100% 浮动：左

.group1 {
  border: 2px solid black;
  width: 180px;
  height: 180px;
  text-align: center;
  display: inline-block;
  font-family: "Open Sans";
}
.title {
  font-size: 14px;
}
.group1 p {
  width: 100%;
  float: left;
}
.group1 img {
  float: left;
}

<div class='group1'>
  <p> <span> <img src='http://placeimg.com/50/50/any'/> </span>

  </p>
  <p> <span class='title'> First </span>

  </p>
  <p> <span> second </span>

  </p>
</div>

【讨论】：

【解决方案4】：

一个<br/> 来统治他们。

试试这个。

.group1 {
  border: 2px solid black;
  width: 180px;
  height: 180px;
  text-align: center;
  display: inline-block;
  font-family: "Open Sans";
}
.title {
  font-size: 14px;
}
img {
  float: left;
}

<div class='group1'>
  <p> <span> <img src='img1.png'> </span>
  </p>
  <br/>
  <p> <span class='title'> First </span>
  </p>
  <p> <span> second </span>
  </p>
</div>

【讨论】：

使用<br />不好，因为在大项目中，如果你使用br，你不能轻易追踪前端问题。
@Ajaii 你的理由是什么？
对于大项目，我们必须在很多地方加入break。从其他答案来看， display:block 和 clear:both 都可以工作。

【解决方案5】：

试试这个：

img {
    display: block; /* instead of float: left */
}

以后不要对不必要的浮动元素使用clear fix 或overflow: hidden 来使事情复杂化。

【讨论】：

不推荐，因为有span元素也可以是任何东西。
关键问题是浮点数，你可以告诉 OP 使用 inline-block 而不是浮点数。
@Bhojendra-C-LinkNepal 对不起，我没有找到你。 p标签中的span有什么问题？
我的意思是，如果有一些文本使用 float 是一种选择，但 OP 与它们无关（来自评论），所以最好像你一样使用显示块。