Question

我正在尝试找到在“真棒字体”图标旁边书写文本的正确方法。我希望文本在图标旁边对齐，并且当文本加长（或缩短显示宽度）时，我想在图标旁边换行而不是在图标下包裹多行文本。 / p>

<div class="row">
  <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
    <h1 id="title">Title
    </h1>
    <table id="iiij" align="left" border="0" cellpadding="1" cellspacing="1">
      <tbody>
        <tr class="row">
          <td class="cell">
          </td>
        </tr>
      </tbody>
    </table>
    <div id="header">
      <h4>Header
      </h4>
      <br/>
      <div id="box.img">
        <i class="fas fa-home">
        </i>
        <p id="content"> This icon is a picture of a house. I want the text to wrap square so is does not load below the icon. When the display is changed, for mobile users, it jumps below the icon.
        </p>
      </div>
    </div>
    <div class="form-container margin-top-40">
    </div>
  </div>
</div>

     <style>#iiij{
  width:100%;
  }
  .fas.fa-home{
    font-size:36px;
    align-self:start;
    float:left;
  }
  #box.img{
    font-size:10em;
    color:rgb(32, 61, 133);
    padding-left:10px;
    float:left;
    margin-top:16px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:16px;
    clear:left;
    display:inline-block;
  }
  #title{
    color:rgb(32, 61, 133);
    margin-top:21.44px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:21.44px;
  }
  #header{
    color:rgb(32, 61, 133);
    margin-top:21.28px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:21.28px;
  }
  #content{
    color:rgb(85, 85, 85);
    margin-top:16px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:16px;
    float:left;
    align-self:start;
    display:inline-block;
    clear:inherit;
  }
</style>

https://codepen.io/MSchleicher/pen/wONzPb

我希望图标与页面的左侧对齐，文本与之相邻，就像它们是内容的单独列一样。

Answer 1

请考虑将#box.img切换为flex。

#box.img {
  display: flex;
}

这将提供所需的布局。从那里，只需根据需要调整填充。

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

具有FA图标和文字换行的HTML / CSS问题

1 个答案: