Question

不知道如何描述，请在codepen中查看。

<div class="container">
<h1></h1>
<div class="box">
<div class="sharePanel">
  <div>content</div>
</div>
<div class="sharePanel">  
</div>
</div>
</div>



body 
{
    font: 15px / 1.8em "Microsoft YaHei";
    line - height: 40px;
}

.container {
    width: 960px;
    margin: 20px auto;
    border: solid 1px;
}

.container h1 {
    text - align: center; /*center the inline-block*/
}

.container.box {

    text - align: center;
}

.container.sharePanel {
    display: inline - block;
    height: 100px;
    width: 100px;
    border: solid 1px;
    border - radius: 5px;
    margin - right: 10px;

}

Answer 1

使用vertical-align: top;默认vertical-align值为baseline

.container .sharePanel {
 vertical-align: top;
}

Answer 2

您需要将vertical-align:top应用于div，因为内联元素的默认属性为vertical-align:baseline

CSS：

.container .sharePanel {
 vertical-align: top;
}

请参阅以下链接以更好地了解您的问题：

Cross-browser-inline-block

Answer 3

尝试类似下面的内容

<强> CSS

p{

}
body{
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUQAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBAQEBAQEBAYEBQUFBQQGBgcHBwcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAECAwMFBAUJBgYJDQoICg0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAIAAgAwERAAIRAQMRAf/EAGYAAAMBAQAAAAAAAAAAAAAAAAABAgMJAQEBAQAAAAAAAAAAAAAAAAAAAQQQAAICAQQABAUFAAAAAAAAAAECEQMSITEiE0FRoeHwYYEjQ3GR8UJiEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDslWRjUuWRIQAq289cGWsPnMyZHnPLWworsR2qbu2QK2LyBl0kflO86b7+M8yrVyvS1ZDK5Rcsg3jUP7WySQTHvDBNTFhXDyjhCLc8lIis6fdO/wATPIGGUCoC9YbEdhchWk0qIysO523+s8iLraBmGUo5Q5ZSoP2gNDYfP18zyBVs4SpsmORQK2TSC/UNSbTJ+NZ5FMFWxPdAdkjm0ETVOnZqTIifWeQCkKlSdhZ7ArFcgdusH8p1131+s8gEsVoUkMzMrABgCI6ziYsPifD9NZ5A1dlwTOcsYsL6EHr2mz/XzP78gVbMwULaIVlbUyJittjYdwfXxnkBXLdbhmE4MhNhM8aogdh9/nPIEs2EObAzKUAAs0Aio642wd/5nkGgcFqwz4zDYlpnWsmfuGdxrr68gK2IbDsV4gGCI1WsajsPnPueQf/Z);

  font: 15px/1.8em "Microsoft YaHei";
  line-height: 40px;

}

.container{
  width :960px;
  margin: 20px auto;
  border: solid 1px;
}

.container h1{
  text-align: center; /*center the inline-block*/
}

.container .box{

  text-align: center;
}

.container .sharePanel{
   display: inline-block;
   height: 100px;
  width: 100px;
  border: solid 1px;
  border-radius: 5px;
  margin-right: 10px;
  text-align: center;
   vertical-align: top;
}

<强> HTML

<!-- container layout  -->
<div class="container">

  <h1></h1>
  <div class="box">
    <div class="sharePanel">
      content
    </div>
    <div class="sharePanel">

    </div>


  </div>
  <p></p>
</div>

正确使用vertical-align: top;。这是Fiddle

Answer 4

尝试这样的事情

 <div class="sharePanel"> content </div>
 <div class="sharePanel">&nbsp; </div>

ALTERNATIVE

.container .sharePanel {
  border: 1px solid;
  border-radius: 5px;
  display: inline-block;
  height: 100px;
  margin-right: 10px;
  text-align: center;
  vertical-align: top;
  width: 100px;
}

为什么第一个盒子掉下来了

4 个答案: