align對div的彼此相鄰 - 媒體查詢

我想呈現我的pafe的一部分，如下圖所示。 http://i.imgur.com/63q9Syr.jpg>我現在可以在大屏幕上正確渲染它。但是當我使用meduia查詢時，第二個盒子會錯位。我看起來比第一個盒子高一點。有辦法我可以修復它嗎？align對div的彼此相鄰 - 媒體查詢

<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/

來源

2014-09-23 user3861559

你需要爲這個媒體查詢？看起來你所需要的只是在兩者上都放置「margin-top」或「margin-bottom」。 – Matthew 2014-09-23 20:43:54

由於您使用的是有限的「寬度」（30％），因此它打破了文本行，錯過了對齊佈局...... – LcSalazar 2014-09-23 20:45:45

好吧，我正在使用媒體查詢來構建響應式頁面。我提到的問題出現在我插入媒體查詢時。我很可能是一個保證金問題，但我無法弄清楚。我試着將上邊距設置爲月份欄和年份欄。我沒有做過什麼工作。 – user3861559 2014-09-23 20:46:53

只要刪除：

margin-top:35px;

一套

它爲0，在媒體查詢。

另外補充：

vertical-align: top;

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

來源

2014-09-23 21:39:49 Milkmannetje

我創建了一個示例，請檢查下面的代碼和提琴樣本！

的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

來源

2014-09-26 06:26:56 Aru

align對div的彼此相鄰 - 媒體查詢

回答

相關問題