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