Question

我认为这可以通过浮动图像来完成，但我想看看我是否也可以使用我在本网站上看到的建议答案来做到这一点。这是在图像和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>

如果无法使用显示内联块，有没有人知道除浮动图像和使用clearfix之外的选项是什么？

Answer 1

添加以下CSS规则：

.icon {
  display:flex;
}

请参阅以下代码：

＆＃13;

.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
}
.icon {
  display:flex;
}

＆＃13;

<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... Duck Cleaning. If you need a duck... Duck Cleaning. If you need a duck...</span> 
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果从范围calc(100% - 68px)中取出图像的宽度，它将按预期工作，否则，跨度将增长以填充其父级的宽度，从而断开线。

.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;
    width: calc(100% - 68px);
}

<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...
      Duck Cleaning. If you need a duck...
      </span> 
    </div>
  </div>

Answer 3

您可以使用CSS表，该表具有IE8 +的浏览器支持，将容器设置为display:table，将列设置为display:table-cell。

顺便说一下，您的HTML缺少</div>，请务必修复此问题。

<强> jsFiddle

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

图像与文本内联和停止文本包装

3 个答案: