javascript - 麦哲伦修复后的奇怪行为基础5

购买产品时，我正在尝试创建类似于Apple的产品摘要（侧栏）。我正在使用麦哲伦（Magellan），它似乎以960像素以下的任何宽度折断页面。它可能与表有关。我不确定任何帮助或建议将不胜感激。像下面的照片：

。

<div data-magellan-expedition="fixed">
    <div class="large-2 columns right" >
        <div id="top">
            <h5>Summary</h5>
            <h4>Business Cards</h4>
        </div>

        <div id="summary">
            <table>
                <tbody>
                    <tr><td>Digital</td></tr>
                    <tr><td>3.5 * 2</td></tr>
                    <tr><td>Qty: 50,000</td></tr>
                    <tr><td>14 Point C2S</td></tr>
                    <tr><td>Color Front, Empty Back</td></tr>
                    <tr><td>5 Business day turnaround</td></tr>
                    <tr><td>5 Business day turnaround</td></tr>
                    <tr><td>5 Business day turnaround </td></tr>
                </tbody>
             </table>

             <h5>Your Price:      $64.5</h5>
             <h5> Unit Cost:      $0.323</h5>
             <a href="#" class="small radius success button">Get Started</a>
        </div>
    </div>
</div>

最佳答案

女巫的一个问题可能是桌子的宽度。尝试添加#top table { width: 100%;}

当您使用F5且它不支持旧版IE浏览器时，您可以实现更多的HTML5和CSS3结构：

<data-magellan-expedition="fixed">
<section id='business' class='large-3 medium-12 columns right'>
    <header>
        <h1>Summary</h1>
        <p>Business Cards</p>
    </header>
    <article>
        <table class='debug'>
            <tbody>
                 <tr><td>Digital</td></tr>
                 <tr><td>3.5 * 2</td></tr>
                 <tr><td>Qty: 50,000</td></tr>
                 <tr><td>14 Point C2S</td></tr>
                 <tr><td>Color Front, Empty Back</td></tr>
                 <tr><td>5 Business day turnaround</td></tr>
                 <tr><td>5 Business day turnaround</td></tr>
                 <tr><td>5 Business day turnaround </td></tr>
           </tbody>
       </table>
       <p class='price'>Your Price:      </p>
       <p class='price'> Unit Cost:      </p>
       <a href="#" class="small radius success button">Get Started</a>
    </article>
</section>
</div>

它仅是语义上的一点，并且具有更多的逻辑轮廓。您可以在#business中定位目标标记：

#business table { width: 100% }
#business > header {}
#business > article {}
#business > header > h1 {}

与您匹配的示例标记示例：

.debug {border: 1px solid red;}
/* Bussines root modifiers */
#business table { width: 100%;}

/* Bussines #top */
#business > header {
    /* Target former #top */
}

#business > header > h1 {
    font-size: 2rem;
    margin: 0px;
    padding: 0px;
}

#business > header p {
    font-size: 2.5rem;
    margin: 0px;
    padding: 0px;
}

/* Business #summary */

#business > article {
    /* Target former summary */
}

/* Price specs */
.price {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0px; padding: 0px;
}
.price:last-of-type {margin-bottom: .5rem;}

Github要点> https://gist.github.com/anonymous/8915089

如果不能解决问题，请发布更多信息。像whera一样，图像中的复选框也是如此。

关于javascript - 麦哲伦修复后的奇怪行为基础5，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21439184/