Question

我添加了这个小猪的图像，因此它会在文本的旁边，但是当我尝试添加水平线和文本时，它不会显示在图像和文本下，而是保留在图像中。{ {3}}

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;
 }

感谢您的帮助，我尝试了溢出：隐藏或清除：两者都没有效果

Answer 1

浮动结束后，为每个示例添加<div> clear:both

Answer 2

你有一个额外的DIV。

并且也是这样做的：

<hr style="clear:both">

＆＃13;

#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;
 }

＆＃13;

   <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>

＆＃13;

float：左图包含其下的其他元素

2 个答案: