Question

<div class="info-content" style="display:none;">
  <div class="info-content-header clear">
      <h1 class="lg-grn-color">Connect To Your Security System</h1>
      <div><img src="/mobile/images/smb_fast.png"/> </div>
  </div>    
</div>
<style>
    .info-content .info-content-header h1 {
     float: left;
     font-weight: normal;

    }

    .info-content .info-content-header div{
     float:left;
     margin-left:2rem;
     width:30%;
    }
</style>

所以这个我的css和html文件，当图像div没有标题时应该扩展到100％宽度

Answer 1

由于您浮动了h1标记，因此它只是所需的宽度（适应其内容）。将图像放在标题内，使图像浮动。然后标题将始终为100％宽度。

<div class="info-content" style="display:none;">
  <div class="info-content-header clear">
      <h1 class="lg-grn-color">Connect To Your Security System
          <img src="/mobile/images/smb_fast.png"/></h1>
  </div>    
</div>

.info-content .info-content-header h1 {
    font-weight: normal;
}

.info-content .info-content-header h1 img {
    float:left;
    margin-left:2rem;
    width:30%;
}

如果没有浮动图像，则应调整标题宽度

1 个答案: