我已经在彼此之上创建了几个div。
这是我遇到的问题。 sessiondetails(sessionspeakers和sessionhosts)中的2个div虽然排在我们自己的顶部,就像我想要的那样,他们不会听我告诉他们关于填充的内容。我想要它们之间大约15px的空间,但它们彼此重叠。
这是我正在使用的HTML:
<div class="sessiondetails">
<h3>Global Security Challenges and How We're Facing Them</h3>
Some of the biggest and most successful companies in the world depend on RSA's products and services for protection. Niloofar Howe, RSA's Chief Strategy Officer, is charged with making sure her company is responding to the needs of those customers by anticipating the next threat.<!-- Start of speaker list -->
<div class="sessionspeakers">
Speaker:<br><div class="speaker"><img src="http://www.structuresecurity.com/wp-content/uploads/2016/08/structuresecurityconf-niloo-howe.jpg" width="100px" height="100"><a href="http://www.structuresecurity.com/speaker/niloofar-razi-howe/"><strong>Niloofar Howe</strong></a><br> Chief Strategy Officer, RSA</div>
</div> <!-- End of sessionspeakers list -->
<!-- Start of host list -->
<div class="sessionhosts">
Host:<br><a href="http://www.structuresecurity.com/speaker/mahendra-ramsinghani/"><strong>Mahendra Ramsinghani</strong></a>, Founder, Secure Octane
</div> <!-- End of sessionhosts list -->
</div>
这是我的css:
.sessionentry {
width: 100%;
border-top: 1px solid grey;
border-top-color: grey;
border-bottom: 1px solid grey;
border-bottom-color: grey;
clear: both;
vertical-align: top;
overflow: hidden;
padding: 20px 0;
}
.sessiontime {
width: 15%;
float: left;
display: inline-block;
padding-left: 15px;
}
.sessiondetails {
width: 75%;
float: left;
display: inline-block;
}
.sessionmoderator, .sessionspeakers, .sessionhosts, .sessionemcee {
margin-top: 15px;
clear: both;
float: left;
}
.speaker {
overflow: visible;
display: block;
clear: both;
}
.speaker img {
float: left;
margin-right: 15px;
}
那么有些灵魂请告诉我我做错了什么?
以下是问题的两个图像:
Sessionspeakers部分不够深入:
然后是sessionhosts(底部的div看起来太高而且覆盖了部分照片)