你怎麼讓img 100％的父母身高

我正在一個有很多文字的頁面上工作，我想包含一個圖片。問題是img比段落高。有誰知道我可以如何使img 100％的容器？你怎麼讓img 100％的父母身高

.container { 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    padding: 5px; 
 
} 
 

 
img { 
 
    float: right; 
 
}

<body> 
 
    <p class="container"> 
 
    <img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit 
 
    amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc 
 
    egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec. 
 
    </p> 
 
</body>

來源

2017-08-30 Brandon Feder

你可以添加一個plnkr與您現有的代碼？ –

@ StephenR.Smith請不要只建議添加代碼鏈接。所有相關的代碼應該包括*在問題本身* –

@Brandon你的問題是你已經把圖像上的浮球 –

的問題是，float採用標準流程的圖像OTU，所以你需要實現Clearfix：

1 CSS創建clearfix類：

添加以下CSS（注意：這適用於IE8及更高版本。如果您需要支持舊瀏覽器，請檢查上面的鏈接）。

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

2.將clearfix到你的HTML：

的clearfix類添加到包含您的圖像即<p class="container clearfix">

工作演示股利：

注意：我的容器寬度爲100％，以便您可以看到效果ct - 否則在小型CodeSnippet窗口中，文本不夠短，不足以導致您描述的問題。

.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    padding: 5px; 
 
} 
 

 
img { 
 
    float: right; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<body> 
 
    <p class="container clearfix"> 
 
    <img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit 
 
    amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc 
 
    egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec. 
 
    </p> 
 
</body>

來源

2017-08-30 17:47:17 FluffyKitten

你怎麼讓img 100％的父母身高

回答

相關問題