float：左圖像包含其下的其他元素

我已經添加了這個圖像的小豬，所以它會在旁邊的文本，但是當我試圖添加水平線和文本時，它不顯示下圖像和文字，但保持與圖像。 Screenshot float：左圖像包含其下的其他元素

HTML：

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title>Sími portfólio</title> 
    <link rel="stylesheet" type="text/css" href="pokus1.css" /> 
    </head> 
    <body> 

    <div id="hlavni"> 

    <h1 id="nadpis"> XXXXXXXXXXXXXX </h1> 

    <p id="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    In dapibus augue non sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus. 
    Duis viverra diam non justo. Etiam posuere lacus quis dolor. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nulla est. 
    Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nam sed tellus id magna elementum tincidunt. 
    Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Integer tempor. Pellentesque arcu. </p>   

    </div> 

    <img src="tučík.png" alt="prasátko" id="prasatko"> 

    <hr> 

    <p> . Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus. 
    Duis viverra diam non justo. Etiam posuere lacus quis dolor. </p> 

    </div> 
    </body> 
</html>

CSS：

body { 
display:block; 
width: 800px; 
margin-top: 10px; 
margin-left: 550px; 
margin-right: 550px; 
background-image: url("pozadi.png"); 
overflow: hidden; 
} 
#hlavni { 
clear: both; 
overflow: hidden;} 

#nadpis { 
display:block; 
background-color: grey; 
font-size: 50px; 
font-family: Garamond; 
font-style: italic; 
padding: 8px; 
overflow: hidden;} 

#text { 
line-height: 30px; 
font-size: 20px; 
float: right; 
clear: right; 
width: 55%; 
overflow: hidden; 
} 

#prasatko { 
height: 300px; 
width: 300px; 
position: relative; 
right: 60px; 
bottom: 50px; 
float: left; 
clear: left; 
overflow: hidden; 
}

感謝您的幫助，我已經試過溢出：隱藏或明確：既但沒有任何工程

來源

2017-09-04 Filip

你有一個DIV額外。

而且也只是這樣做：

<hr style="clear:both">

#hlavni { 
 
clear: both; 
 
overflow: hidden; 
 
} 
 

 
#nadpis { 
 
display:block; 
 
background-color: grey; 
 
font-size: 50px; 
 
font-family: Garamond; 
 
font-style: italic; 
 
padding: 8px; 
 
overflow: hidden;} 
 

 
#text { 
 
line-height: 30px; 
 
font-size: 20px; 
 
float: right; 
 
clear: right; 
 
width: 55%; 
 
overflow: hidden; 
 
} 
 

 
#prasatko { 
 
height: 300px; 
 
width: 300px; 
 
position: relative; 
 
right: 60px; 
 
bottom: 50px; 
 
float: left; 
 
clear: left; 
 
overflow: hidden; 
 
}

<div id="hlavni"> 
 

 
    <h1 id="nadpis"> XXXXXXXXXXXXXX </h1> 
 

 
    <p id="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 
    In dapibus augue non sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus. 
 
    Duis viverra diam non justo. Etiam posuere lacus quis dolor. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nulla est. 
 
    Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nam sed tellus id magna elementum tincidunt. 
 
    Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Integer tempor. Pellentesque arcu. </p>   
 

 

 
    <img src="tučík.png" alt="prasátko" id="prasatko" style="background:red"> 
 

 
<hr style="clear:both"> 
 

 
    <p> . Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus. 
 
    Duis viverra diam non justo. Etiam posuere lacus quis dolor. </p> 
 

 
    </div>

來源

2017-09-04 16:22:17 mzvarik

結束後你的浮動，加上一個<div>每個例子與clear:both

來源

2017-09-04 16:20:27 Sletheren

float：左圖像包含其下的其他元素

回答

相關問題