Question

我正在尝试渲染我的pafe的一部分，如下图所示。 http://i.imgur.com/63q9Syr.jpg＆GT;我现在可以让它在更大的屏幕上渲染。但是当我使用meduia查询时，第二个框错误对齐。我似乎比第一个盒子稍微高一点。有没有办法解决它？

<section class="carousel price-carousel">   <!--Price section -->
   <div class="container">

      <div class="price-container">
            <span class="month-column">
                    <h4>Monthly</h4>
                    <p>$9.95</p>
                    <p class=”sub-text”>per computer</p>
            </span>
             <span class="year-column"> 

                    <h4>Yearly</h4>
                    <p>$99</p>
                    <p class=”sub-text”>Save 20% when you pay anually</p>
              </span>
      </div>
</div>  
</section>

非常感谢任何帮助。

JSFiddle链接：http://jsfiddle.net/d4gyo5s8/7/

Answer 1

只需删除：

margin-top:35px;

在媒体查询中将其设置为0。

另外添加：

vertical-align: top;

证明： http://jsfiddle.net/zmqoz7pv/1/

Answer 2

我已经创建了一个示例，请检查以下代码和小提琴样本!!

HTML：

<section class="carousel price-carousel">        
    <div class="container">
        <div class="price-container">
            <span class="month-column">
                <h2>Monthly</h2>
                <h3>$9.95</h3>
                <p class="sub-text">per computer</p>
             </span>
             <span class="year-column">            
                 <h2>Yearly</h2>
                 <h3>$99</h3>
                 <p class="sub-text highlight">Save 20% when you pay anually</p>
             </span>
      </div>
    </div>
</section>

CSS

*, ht, h2, h3, h4, p, div, img {
    margin:0;
    padding:0;
}
.container {
    background-color: #eee;
}
.price-container {
    text-align:center;
    vertical-align:top;
    font-family:arial;
    font-size:14px;
    color:#333333;
}
.price-container span {
    display:inline-block;
    margin:10px;
    padding-bottom:10px;
    border:1px solid #676767;
    width:300px;
    background:#fafafa;
}
.price-container h2 {
    font-size:18px;
    font-weight:bold;
    color:#f1f1f1;
    background:#676767;
    padding:5px 0;
}
.price-container h3 {
    font-family:'Arial Black', Helvetica, Verdana, sans-serif;
    font-size:30px;
    font-weight:bold;
    color:#000000;
    padding:8px 0;
}
.sub-text {
    font-family:arial;
    font-size:16px;
}
.highlight {
    color:#609347;
}

Fiddle Demo

将两个div对齐 - 媒体查询

2 个答案: