0
我想排队三个面板如截图所示，但我试过的一切都没有解决问题。我已经尝试将面板宽度减少到30％并将它们浮动，并且我使用了display：inline，但问题仍然存在。任何想法是什么造成这种情况？面板不排队
HTML：
<div class="row" id="hscontent">
<div class="small-12 medium-4 large-4 columns" id="skinny">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-A.png" /></div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead"><h5 class="taba">Our virtual tour !</h5></div>
</br>
<p class="tabpara">Take a virtual tour of the Horseshoe Bar and Restaurant and see for
yourself its unique, alluring and enchanting interior and atmosphere . It’s rich history and
heritage combines in a warm and charming blend that mixes traditional Irish decor with ornate
old World elegance.</p>
</div>
</div>
<div class="small-12 medium-4 large-4 columns" id="skinny">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-B.png" /></div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead"><h5 class="tabb">See our menus</h5></div>
</br>
<div class="hstabs">
<a href="default.asp"><span class="tabby">Bar Menu</span></a>
<a href="default.asp"><span class="tabby">Evening Menu</span></a>
<a href="default.asp"><span class="tabby">Wine Menu</span></a>
<a href="default.asp"><span class="tabby">Whiskey Menu</span></a>
<a href="default.asp"><span class="tabby">Gin Menu</span></a>
</div>
</div>
</div>
<div class="small-12 medium-4 large-4 columns" id="skinny">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-C.png" /></div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead"><h5 class="taba">Our take on trad</h5></div>
</br>
<p class="tabpara">At one of the Horseshoe’s music sessions you’ll see and hear all of the
splendour that is the Irish traditional music session. A local gathering of talented, and soulful
musicians spinning tunes that capture all of the joy, sorrow, humour and heart of a Irish
traditional music set. </p>
</div>
</div>
</div>
</div>
</body>
</html>
相关CSS：
@charset "utf-8";
/* CSS Document */
body {
width:1200px;
}
.row {
max-width: 1200px;
}
#hsback {
width: 1200px;
height: 1320px;
background-image: url('../Images/HSBACK-WIDE.jpg');
background-repeat: no-repeat;
background-position: center center;
padding-right: auto;
padding-left: auto;
}
#hscontent {
margin-top:-640px;
}
#skinny {
width:30%;
float:left;
display:inline;
}
.panela {
display:inline;
}
panelimg {
width: 100%;
}
hr.style1{
border-top: 1px solid #000;
width: 80%;
text-align: center;
box-shadow: none;
}
.panel {
margin-right: auto;
margin-left: auto;
background-color: #2b4e24;
width: 87%;
overflow:hidden;
box-shadow: 7px 7px 5px #000000;
}
.panela img {
overflow:visible;
margin-right: auto;
margin-left: auto;
width: 100%;
}
.panela a {
margin-right: auto;
margin-left: auto;
text-align:center;
}
.taba {
color: #fff;
line-height: 1.0;
font-family: 'Dancing Script', cursive;
font-weight:400;
font-size: 2.1rem;
margin-top:0.5rem;
text-align:center;
width:98%;
border-bottom: 1px Solid #FFFFFF;
padding-bottom: 0.3rem;
}
.tabb {
color: #fff;
line-height: 1.0;
font-family: 'Dancing Script', cursive;
font-weight:400;
font-size: 2.1rem;
margin-top:0.5rem;
text-align:center;
width:98%;
border-bottom: 1px Solid #FFFFFF ;
padding-bottom: 0.3rem;
}
.tabhead {
width: 80%;
margin-right: auto;
margin-left: auto;
}
.tabpara {
color: #fff;
font-family: 'EB Garamond', serif;
font-size: 1.2rem;
line-height: 1.3;
text-align:center;
margin-top: -70px;
word-spacing: -2;
margin-right: auto;
margin-left: auto;
padding:3px;
width:98%;
}
.tabcolor {
background-color: #2b4e24;
}
.hstabs {
margin-top: -3.7rem;
padding-bottom: 0.90rem;
}
.tabby {
color: #fff;
font-family: 'EB Garamond', serif;
font-size: 1.7rem;
line-height: 1.2;
text-align:center;
text-transform: uppercase;
padding-top: 0.15rem;
padding-bottom: 0.15rem;
display:block;
}
.tabby {
text-align:center;
}
您的问题网页的链接无法正常工作。此外，将其设置为工作片段，让我们更容易帮助您 – DCR