真的不确定为什么会这样，但它很烦人，因为我似乎无法找到它的原因。
如果我采用下面的HTML并在class =＆＃34; comments＆＃34;中添加一个P元素。然后，它会推倒整个班级=＆＃34;评级评论＆＃34;它在里面。即使我关闭边距并填充它仍然会这样做，为什么会这样？
看这个小提琴可能更有意义：https://jsfiddle.net/sz4fodqj/
我希望中心的两个div是内联的，但是P标签会阻止它。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nrthrn</title>
<link rel="icon" href="./res/icon.png">
<link rel="stylesheet" type="text/css" href="960styling.css" id="stylesheet">
</head>
<div id="wrapper">
<body>
<div class="headerBar">
<img id="logo" src="./res/logo.png"/>
<ul class="menu">
<li><a href="index.html" accesskey="h">Home</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="pastEvents.html" accesskey="o">Past Events</a></li>
<li><a href="about.html" accesskey="c">About Us</a></li>
<li><a href="form.html" accesskey="a">Contact Us</a></li>
</ul>
<a id="loginLink" href="login.html">Login</a>
</div> <!-- end headerBar -->
<div class="promoArea">
<img id="bigLogo" src="./res/bigLogo.png"/>
</div>
<div class="eventsSearchBar">
<p>Order By: </p>
<select required="required" name="field4" class="selectfield">
<option value="Advertise">Closest Date</option>
<option value="Partnership">Furthest Date</option>
<option value="General Question">Rating: High to Low</option>
<option value="General Question">Rating: Low to High</option>
</select>
</div>
<div class="pastEventsContentArea">
<div class="pastEventRowContainer">
<div class="pastEventContainer">
<div class="dateWrapper">
<span class="day"><p id="daytext"><b>23rd</b></p></span>
<span class="month"><p id="monthtext"><b>May</b></p></span>
</div>
<div class="textWrapper">
<div class="title"><p id="eventTitle">ODESZA</p></div>
<div class="location"><p>Location</p></div>
</div>
<div class="buttonWrapper">
<button id="moreInfoButton">Info</button>
<button id="moreInfoButton">Tickets</button>
</div>
</div>
<div class="ratingComment">
<div class="rating">
</div>
<div class="comments"><!--P CLASS HERE MAKES WEIRD THINGS HAPPEN--></div>
</div>
</div>
</div>
<div class="footerBar">
<div class="footerLeft">
<ul>
<li><a href="index.html" accesskey="h">Home</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="pastEvents.html" accesskey="o">Past Events</a></li>
<li><a href="about.html" accesskey="c">About Us</a></li>
<li><a href="form.html" accesskey="a">Contact Us</a></li>
</ul>
</div>
<div class="footerRight">
<img src="./res/facebook.png"/>
<img src="./res/twitter.png"/>
<img src="./res/instagram.png"/>
</div>
</div>
<p id="copyright">Copyright 2017</p>
</body>
</div>
</html>
CSS
.pastEventsContentArea{
width: 95%;
margin: 50px auto 50px auto; /*top right bottom left */
padding-top: 20px;
/* background-color: #ff6464;*/
text-align: center;
}
.pastEventContainer{
/*width: 45%;
height: 30%;*/
/* width: 55%;*/
height: 120px;
/* background-color: rgba(0, 0, 0, 0.2);*/
background-color: #ffffff;
margin-left: 5%;
margin-right: 0%;
/* margin-bottom: 10px;*/
/* margin-right: 10px;*/
display: inline-block;
min-width: 500px;
max-width: 500px;
color: black;
border-style: solid;
border-color: #363636;
border-width: 1px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.pastEventContainer .dateWrapper{
width: 20%;
/*background-color: rgba(0, 0, 0, 0.4);*/
height: 100%;
float: left;
font-family: opensans;
color: black;
}
.pastEventContainer .textWrapper{
width: 45%;
/* background-color: rgba(0, 0, 0, 0.6);*/
height: 100%;
float: left;
color: black;
font-family: opensans;
margin-left: 10px;
}
.pastEventContainer .buttonWrapper{
width: 30%;
/* background-color: rgba(0, 0, 0, 0.8);*/
height: 100%;
float: left;
}
.pastEventContainer .dateWrapper .day{
display: inline-block;
width: 100%;
height: 60%;
/* background-color: red;*/
font-size: 25px;
font-family: opensans;
}
.pastEventContainer .dateWrapper .month{
display: inline-block;
width: 100%;
height: 40%;
/* background-color: indianred;*/
font-size: 24px;
}
.pastEventContainer .dateWrapper #daytext{
margin-top: 30%;
}
.pastEventContainer .dateWrapper #monthtext{
margin-top: -10%;
}
.pastEventContainer .textWrapper .title{
/* background-color: aqua;*/
height: 50%;
margin: 0;
margin-top: 30px;
font-size: 20px;
overflow: hidden;
}
.pastEventContainer .textWrapper .location{
/* background-color: blue;*/
margin-top: -20px;;
font-size: 14px;
max-height: 30px;
min-height: 30px;
overflow: hidden;
}
.pastEventContainer .textWrapper p{
margin: 0;
text-align: left;
}
.pastEventContainer .buttonWrapper #moreInfoButton{
display: block;
margin-left: auto;
margin-right: auto;
font-family: Porter;
text-transform: uppercase;
background-color: #242424;
height: 30%;
color: white;
outline: 0;
width: 75%;
border: 0;
padding: 10px;
font-size: 15px;
/*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-top: 10%;
}
.pastEventRowContainer .ratingComment{
display: inline-block;
height: 120px;
background-color: white;
width: 30%;
margin: 0;
margin-left: 50px;
padding: 0;
border-style: solid;
border-color: #363636;
border-width: 1px;
max-width: 300px;
}
.pastEventRowContainer .ratingComment .rating{
/* background-color: red;*/
height: 50%;
display: block;
margin: 0;
}
.pastEventRowContainer .ratingComment .comments{
/* background-color: aqua;*/
height: 50%;
display: block;
text-align: center;
color: black;
font-family: opensans;
font-size: 20px;
position: relative;
}
.pastEventRowContainer .ratingComment a{
display: block;
margin: 0;
padding: 0;
position: absolute;
left: 60px;
top: 15px;
text-decoration: none;
}
答案 0 :(得分：0)
默认情况下，p是块级元素。您可以改为使用span或更改css中.comments的显示属性。这实际上取决于你想要在div中添加什么。
答案 1 :(得分：0)
我认为原因是.ratingComment有display: inline-block;。这会强制元素发生变化，以便您在.comments内放置的任何元素都与.pastEventContainer内联。请看这个例子https://jsfiddle.net/sz4fodqj/4/，其中div包含更多文本，但它仍与第一个div内联。