我认为这可以通过浮动图像来完成,但我想看看我是否也可以使用我在这个网站上看到的建议答案来完成。即在图像和span标记上使用inline-block,并使用垂直对齐将文本放在图像旁边。
我遇到的问题是,如果我在span标记后面添加了一个段落,或者在span标记中放了太多的单词,那么所有文本都会在图像下面换行。当我使用一个段落时,我尝试了不同的属性,但这不起作用。
JSFiddle是here

.iconswrapper {
  background-color: peachpuff;
  margin: auto;
  height: 150px;
  margin-top: 15px;
  width: 90%;
  text-align: center
}
.otherinfo {
  line-height: 2em;
  font-size: 1.5em
}
.wrapcon {
  text-align: left;
  width: 75%;
  background-color: #F6F6F6;
  padding: 3px 0 0 5px;
  margin-left: 10%;
}
.icon img {
  width: 60px;
  height: 50px;
  display: inline-block;
  vertical-align: middle
}
.icontitle {
  font-size: 1.1em;
  display: inline-block;
  vertical-align: top
}

<div class="iconswrapper">
  <span class="otherinfo">Other Services</span>
  <div class="wrapcon">
    <div class="icon">
      <img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg" />
      <span class="icontitle">Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck...</span>
    </div>
  </div>

如果使用display inline block是不可能的,那么除了浮动图像和使用clearfix之外,是否有人知道其他选项?

最佳答案

您可以使用CSS table,它支持IE8+浏览器,将容器设置为display:table,将列设置为display:table-cell
顺便说一下,您的HTML缺少一个</div>,请确保修复它。
jsFiddle

.iconswrapper {
  background-color: peachpuff;
  margin: auto;
  height: 150px;
  margin-top: 15px;
  width: 90%;
  text-align: center
}
.otherinfo {
  line-height: 2em;
  font-size: 1.5em
}
.wrapcon {
  text-align: left;
  width: 75%;
  background-color: #F6F6F6;
  padding: 3px 0 0 5px;
  margin-left: 10%;
}
.icon {
  display: table;
  width: 100%;
}
.docs,
.icontitle {
  display: table-cell;
  vertical-align: top;
}
.docs {
  width: 60px;
  height: 50px;
}
.icontitle {
  font-size: 1.1em;
  margin-left: 4px;
}

<div class="iconswrapper">
  <span class="otherinfo">Other Services</span>
  <div class="wrapcon">
    <div class="icon">
      <img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg" />
      <span class="icontitle">Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck...</span>
    </div>
  </div>
</div>

关于html - 内联文本并停止文本换行的图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37754823/

10-11 23:35
查看更多