面板没有排队

Question

我正在尝试排列三个面板，如截图中所示，但我尝试过的所有内容都没有解决问题。我已经尝试将面板宽度减少到30％并浮动它们，我使用了display：inline，但问题仍然存在。是什么原因引起了这个？

Problem Page

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;
}

Answer 1

可能有所贡献的一些问题：

• 您使用的是无效标记 - </br>不是标记。我认为你的意思是<br/>
• HTML结构无效。存在错误的嵌套标记和缺少结束标记。请通过解析器放置HTML以确保HTML正确无误。我在下面做了一些修改。

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;
}

.top-bar {
  padding: 2.0rem;
  background-image: url('../Images/Menuback-TRANS.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: transparent;
}

.top-bar li {
  padding-top: 3.0rem;
  padding-bottom: 2.0rem;
  padding-right: 1.5rem;
  font-size: 1.7rem;
  color: #FFF;
  font-family: 'Lora', serif;
  text-decoration: none;
  list-style-type: none;
}

.top-bar li {
  float: left;
}


/* Make CSS more specific */

.top-bar a {
  text-decoration: none;
  color: #FFF;
  float: left;
}

.menulogo img {
  float: left;
}

#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;
}

#whiskeyback {
  background: url("../Images/NU-WHISKEY-BACK.jpg")!important;
  background-size: cover;
  width: 100%;
  padding: 1.0rem;
}

.whiskey {
  font-family: 'EB Garamond', serif;
  font-size: 2.8rem;
  line-height: 3.0rem;
  color: #e8d789;
  text-align: center;
  text-shadow: 0 0 14px #e8d789;
  padding: 0.8rem;
}

.whiskeytitle {
  padding-top: 0.5rem;
  padding-right: auto;
  padding-bottom: 1.5rem;
  padding-left: auto;
}

.whiskeyparabig {
  color: #f9f8fd;
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.4rem;
  text-align: center;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
  margin-top: -1.5rem;
}

.whiskeypara {
  color: #f9f8fd;
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem;
  text-align: center;
  padding-top: 0.45rem;
  padding-bottom: 4.2rem;
  padding-right: 3.2rem;
  padding-left: 3.6rem;
  margin-top: -1.5rem;
}

a {
  text-decoration: none;
}


/* Make CSS more specific */


/*img {
    display:inline;
}*/

#foota {
  background-image: url('../Images/FOOTER-BACK-BIG.jpg');
  background-size: contain;
  width: 100%;
}

#footmenu {
  padding-top: 2.0rem;
  padding-bottom: 2.0rem;
}

#footmenua {
  padding-top: 1.0rem;
  padding-bottom: 2.0rem;
  margin-left: 0.1rem;
  margin-top: -3.8rem;
}

.footlink {
  font-size: 1.5rem;
  padding: 1.0rem;
  margin-left: 1.0rem;
  color: #f9f8fd;
  font-family: 'Lora', serif;
}

.footlinka {
  font-size: 1.5rem;
  padding: 1.0rem;
  margin-left: 1.0rem;
  color: #f9f8fd;
  font-family: 'Lora', serif;
}

.footpic {
  margin-top: -5.0rem;
  padding-right: 1.0rem;
}

#floatfoot {
  display: inline;
}

#floatfoot img {
  margin-top: -1.0rem;
}

.footlogo {
  margin-top: 0.5rem;
  margin-left: 0.8rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>

<header>
  <div class="row" id="hsback">
    <div class="top-bar">
      <ul>
        <li><a href="#">Menus</a></li>
        <li><a href="#">Special Offers</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Rooms</a></li>
      </ul>
      <img class="menulogo" src="Images/VINTAGE-SIGN-3A2.png" />
    </div>
  </div>
</header>

<div class="row" id="hscontent">
  <div class="small-12 medium-4 large-4 columns">
    <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">
    <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 class="row" id="whiskeyback">
  <div class="small-12 medium-6 medium-offset-6 large-5 large-offset-7 columns">
    <img class="whiskeytitle" src="Images/WHISKEY-GOLD-3.png" />
    <p class="whiskeyparabig">Lorem ipsum dolor sit</p>
    <p class="whiskeypara">amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. </p>
  </div>
</div>
<footer>
  <div class="row" id="foota">
    <div class="row" id="footmenu">
      <div class="small-12 medium-12 large-12 columns">
        <img class="footlogo" src="Images/BEHAN'S-FOOTER-LOGO-GOLD-SMALL.png" />
      </div>
    </div>
    <div class="row" id="footmenua">
      <div class="small-12 medium-6 large-6 columns">
        <a href=" default.asp "><span class="footlink ">Our Menus</span></a>
        <a class="footlink " href="default.asp ">Testimonials</a>
        <a class="footlink " href="default.asp ">Rooms</a>
        <be/>
        <a class="footlinka " href="default.asp ">Take a Tour</a>
        <a class="footlinka " href="default.asp ">Our Sessions</a>
      </div>
      <div class="small-12 medium-3 medium-offset-3 large-3 large-offset-3 columns" id="floatfoot">
        <img class="footpic" src="Images/Trip-Advisor-Smallest.png" />
        <img class="footpic" src="Images/facebook-Smallest.png" />
      </div>
    </div>
  </div>
</footer>