html - 为什么 Inline-block 没有按照我的预期进行？

Question

大约一周前，我所有的 div 都在同一行上正确对齐。

我不确定我做了什么让它们堆叠起来。 “fbox”设置为内联 block ，但它充当 block 。

我真的不想问这个问题，但我为此感到沮丧而浪费时间。

<div class="fbox" id="breast">
        <span class="title">Breast Procedures</span>
        <ul>
            <li>Breast Augmentation</li>
            <li>Breast Lift</li>
            <li>Breast Reduction</li>
            <li>Gynecomastia Surgery</li>
            <li>Breast Implant</li>
            <li>Nipple Surgery</li>
            <li>Breast Asymmetry</li>
        </ul>
<a href="#"><span class="read">View Descriptions</span></a>
    </div>


    <div class="fbox" id="facial">
        <span class="title">Facial Procedures</span>
        <ul>
            <li>Brow Lift</li>
            <li>Face Lift</li>
            <li>Eyelid Lift</li>
            <li>Nose Surgery</li>
            <li>Facial Implant</li>
            <li>Neck Lift</li>
            <li>Earlobe Repair</li>
            <li>Ear Reshaping</li>
            <li>Chin Implant</li>
            <li>Chin Augmentation</li>
        </ul>
<a href="#"><span class="read">View Descriptions</span></a>
    </div>

<div class="padding">
    <div class="fbox" id="body">
        <span class="title">Body Procedures</span>
        <ul>
            <li>Tummy Tuck</li>
            <li>Liposuction</li>
            <li>Mommy Makeover</li>
            <li>Butt Lift</li>
            <li>Body Contouring</li>
            <li>Labiaplasty</li>
            <li>Brachioplasty</li>
            <li>Thigh Lift</li>
            <li>Upper Body Lift</li>
        </ul>
<a href="#"><span class="read">View Descriptions</span></a>
    </div>
</div>

    <div class="fbox" id="surgery">
        <span class="title">Non-Surgical Procedures</span>
        <ul>
            <li>Fat Injection</li>
            <li>Latisse</li>
            <li>Botox</li>
            <li>Dermabrasion</li>
            <li>Chemical Peels</li>
        </ul>
<a href="#"><span class="read">View Descriptions</span></a>
    </div>

CSS:(底部的主要代码。.fbox、.read、.title)

.controls{
    display:none;
}            
.col span_6 {
text-color:black;
color:black;
}
.subheader{
text-color:black;
color:black;
}
.callbox{
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    display:block;
    text-align:center;
    height:75px;
    width:1116.95px;
    line-height:75px;
    font-size:22px;
    font-weight:bold;
}

.toggle h3 a{
    color:black;
}
body .toggle > div {
        padding: 10px 14px;
    border-top: 0px;
    border:1px solid #D2691E;
    display: none;
    background-color: #fff!important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/** .receptionist{
        border:1px solid #D2691E; 
        display:block;
        padding:5px;
        border-radius:5px;
}
**/
.menu-item{
    font-weight:600;
}
.hr{
    display: block;
    height: 1px;
    border: 1px solid #8CAAD2;
    margin: 1em 0;
    padding: 0; 
}
.settingsFront{
    height:10px;
}
.settingsMessage{
    height:150px;
}
.settingsMessageMain{
    height:200px;
}

/** Start here ! **/
.title{
    font-size:16px;
    margin:0 auto;
text-align:center;
font-weight:600;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color:white;
  background:white;
  font-family:Futura;
    -webkit-transition:  box-shadow 1s ease;
 -moz-transition:  box-shadow 1s ease;
 -o-transition:  box-shadow 1s ease;
 -ms-transition: box-shadow 1s ease;
 transition: box-shadow 1s ease;
-moz-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
}
.main-content ul li{
    list-style-type:none;

}
.main-content ul{
    margin:0 auto;
}
.fbox{
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
vertical-align:top;
text-align:center;
margin:0 auto;
position:relative;

}

.read{
  width: 100%;

  left: 0;
  bottom: 0;
  background-color:white;
  background:white;
  font-size:22px;
  height:40px;
  line-height:40px;
  font-family:Futura;
    -webkit-transition:  box-shadow 1s ease;
 -moz-transition:  box-shadow 1s ease;
 -o-transition:  box-shadow 1s ease;
 -ms-transition: box-shadow 1s ease;
 transition: box-shadow 1s ease;
-moz-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
}


.read a{

color:#7e99bd; 

}
.wpcf7-form-control-wrap{
    background:white;
    background-color:white;
}
@media (max-width:767px){
 .fbox{
 width: 200px;
height: 250px;
background: rgb(250, 250, 250);
-moz-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
font-size:12px;
 } 
}

Fiddle

Answer 1

您的第三个 div.fbox 包装在父 div 中，其类 .padding 导致 display: inline-box 规则中断。删除第三个 div.fbox 元素周围的 div.padding 元素，您的 div 标签将重新排列。