CSS：拉伸内联元素以填充可用宽度

Question

我有一个包含文本的页面，并且一些图像浮动到右侧，文本周围流动。

我想提出一个标题，其中有下划线文字（实际上这是一个border-bottom我认为会在这种情况下更容易？）......现在，我的问题是，我想的标题（h3）元素（因此下划线/下边框）很好地展开，直到它（几乎）击中图像。

这里是一个jsfiddle

h3 { 
 
    border-bottom:1px solid #000; 
 
} 
 
img { 
 
    float: right; 
 
    margin-left:15px; 
 
    display:block; 
 
    width:40%; 
 
    height:200px; 
 
    background-color:green; 
 
}

<div> 
 
    <img src="#" alt="This is my image"> 
 
    <h3>This is my title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque totam cumque accusantium repellendus, illum, libero reiciendis est, explicabo obcaecati asperiores suscipit eum? Perferendis ipsa odio maxime, ullam, iste vero! Quis!</p>   
 
</div>

使用h3标签，似乎差不多的工作，但它不尊重图像上的margin-left。

如果图像不在那里，我想让下划线/边框在页面上伸展，所以我不想手动指定宽度。

有没有解决方案？

Answer 1

给<h3>财产overflow:hidden。这可以防止你的头伸过浮动元素：

h3 { 
 
    border-bottom:1px solid #000; 
 
    overflow:hidden; 
 
} 
 
img { 
 
    float: right; 
 
    margin-left:15px; 
 
    display:block; 
 
    width:40%; 
 
    height:200px; 
 
    background-color:green; 
 
}

<div> 
 
    <img src="#" alt="This is my image"> 
 
    <h3>This is my title</h3> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque totam cumque accusantium repellendus, illum, libero reiciendis est, explicabo obcaecati asperiores suscipit eum? Perferendis ipsa odio maxime, ullam, iste vero! Quis!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque totam cumque accusantium repellendus, illum, libero reiciendis est, explicabo obcaecati asperiores suscipit eum? Perferendis ipsa odio maxime, ullam, iste vero! Quis!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque totam cumque accusantium repellendus, illum, libero reiciendis est, explicabo obcaecati asperiores suscipit eum? Perferendis ipsa odio maxime, ullam, iste vero! Quis!</p> 
 
</div>

A relevant read