我的两个<div>元素重叠，无法正常显示。我已经尝试了我能想到的一切，但它们仍然重叠。谁能帮我？有问题的div元素是card div中的两个body div。当在Web浏览器中显示时，两个div重叠在彼此之上。谢谢！
文件：
lineCard.css：
/* Styling for the title of the page */
.title {
color: #666666; /* the color of the title (dark gray) */
font-family: 'Helvetica Neue', 'Helvetica Neue Light', 'Arial', sans-serif; /* the font of the title */
font-size: 36px; /* the font size of the title */
font-weight: bold; /* make the font bold */
line-height: 44px; /* the spacing between lines */
text-align: left; /* align the title on the left side of the page */
}
/* Styling for the subtitle of the page */
.subtitle {
height: 27px; /* the height of the subtitle */
left: 255px; /* the left margin of the subtitle */
position: absolute; /* absolute positioning */
top: 73px; /* the top margin of the subtitle */
width: 318px; /* the width of the subtitle */
color: #7BBD2F; /* the color of the subtitle (green) */
font-family: 'HelveticaNeue-Bold', 'Helvetica Neue', 'Arial', sans-serif; /* the font of the subtitle */
font-size: 22px; /* the font size of the title */
line-height: 27px; /* 27 pixels between lines */
font-weight: bold; /* make the font bold */
padding-bottom: 10px; /* 10 pixels of padding on the bottom */
text-align: left; /* align the text on the right */
}
/* Styling for the logo */
.logo {
float: left; /* move to the left side of the page */
width: 217px; /* the exact width of the logo - CHANGE THIS IF LOGO WIDTH CHANGES */
height: 391px; /* the exact height of the logo - CHANGE THIS IF LOGO HEIGHT CHANGES */
border: 10px solid #999999; /* surround with a 10-pixel gray border */
padding: 13px; /* allow for 13 pixels of padding around the logo */
}
/* Styling for the different cards */
.card {
display: block; /* block display */
overflow: hidden; /* hide overflow */
float: left; /* move to the left side of the page */
left: 300px; /* minimum of 300 pixels from the left side of the page */
font-size: 10px; /* make the font smaller */
position: absolute; /* absolute positioning */
border: 10px solid #999999; /* surround with a 10-pixel gray border */
width: 475px; /* the width of the card */
height: 300px; /* the height of the card */
padding: 7px; /* allow for 7 pixels of padding around the card */
}
/* Styling for the card images */
.card img {
width: 275px; /* make the images have a width of 275 pixels */
height: 80px; /* make the images have a height of 80 pixels */
top: 20%; /* top of image is 20% of card */
bottom: 20%; /* bottom of image is 20% of card */
left: 20%; /* left of image is 20% of card */
right: 20%; /* right of image is 20% of card */
}
/* Styling for the body text*/
.body {
float: left; /* move to the left */
color: #404040; /* the color of the body (more dark gray)*/
font-family: 'HelveticaNeue', 'Helvetica Neue', 'Arial', sans-serif; /* the font of the body */
font-size: 12px; /* the size of the body font */
line-height: 17px; /* 17 pixels between lines */
font-weight: bold; /* make the font bold */
padding-left: 60px;
padding-top: 30px;
text-align: left; /* align the body text to the left */
}
/* Styling for the check boxes */
.body img {
display: inline-block; /* display the check boxes inline */
float: left; /* move towards the left */
position: relative; /* relative positioning */
top: 1px; /* 1 pixel space at the top */
}
lineCard.html：
<html>
<head>
<title>Line Card</title> <!--the title that shows in a Web browser's title bar-->
<link rel="stylesheet" type="text/css" href="style/lineCard.css"> <!--import the stylesheet-->
</head>
<body>
<!--First we define the menu-->
<div class="menu">
</div>
<br>
<p class="title">redacted</p> <!--display the first line of the title-->
<p class="subtitle">redacted</p> <!--display the second line of the title-->
<img class="logo" src="redacted" alt="redacted"> <!--create the logo image-->
<div class="body">
<!--now we display the different info cards -->
<div class="card">
<!--first we display the logo as a link-->
<a redacted</a>
<br>
<br>
<br>
<br>
<br>
<!--then we display the text of the card-->
<p>redacted</p>
<p>redacted</p>
<p>redacted</p>
<p>redacted</p>
<p>redacted</p>
<p>redacted</p>
<p>redacted</p>
<p>redacted</p>
</div>
<div class="card">
<!--as always, the logo comes first-->
<a redacted</a>
<br>
<br>
<br>
<br>
<br>
<!--then we display the text of the card-->
<p></p>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
Hi Techgineer
我已经对你的CSS进行了这些修改，并且div不再重叠了，我在.card中评论位置并在.body中添加一个特定的宽度（宽度：300px result）
enter code here
.card {
/*display: block;*/ /* block display */
overflow: hidden; /* hide overflow */
float: left; /* move to the left side of the page */
left: 300px; /* minimum of 300 pixels from the left side of the page */
font-size: 10px; /* make the font smaller */
/*position: absolute;*/ /* absolute positioning */
border: 10px solid #999999; /* surround with a 10-pixel gray border */
width: 475px; /* the width of the card */
height: 300px; /* the height of the card */
padding: 7px; /* allow for 7 pixels of padding around the card */
/*border: 1px solid black;*/
}
/* Styling for the body text*/
.body {
float: left; /* move to the left */
color: #404040; /* the color of the body (more dark gray)*/
font-family: 'HelveticaNeue', 'Helvetica Neue', 'Arial', sans-serif; /* the font of the body */
font-size: 12px; /* the size of the body font */
line-height: 17px; /* 17 pixels between lines */
font-weight: bold; /* make the font bold */
padding-left: 60px;
padding-top: 30px;
text-align: left; /* align the body text to the left */
width: 300px;
}