如何均匀对齐两个div答案

【问题标题】：How to align two divs evenly [duplicate]如何均匀对齐两个div
【发布时间】：2014-11-18 02:21:05
【问题描述】：

我正在尝试渲染我的一部分，如下图所示。 http://i.imgur.com/63q9Syr.jpg 虽然我让它适用于较小的屏幕（使用媒体查询），但我无法让它适用于 > 768px 的屏幕尺寸。它要么使 2 个框重叠，要么使框两侧的空间不均匀。有什么办法可以解决吗？

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

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

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

JSFiddle：http://jsfiddle.net/d4gyo5s8/

【问题讨论】：

为什么要使用轮播？您是否有超过 2 条公告并希望一次显示 2 条？
carousel 只是一个类名，我用它来捆绑分布在不同部分的一堆字体。我正在尝试在我的页面中显示图像中的内容。

标签： css html

【解决方案1】：

我会使用如下的内联块来代替浮点数。

.container {
    margin: 0 auto; 
    max-width:1050px;
}

.price-carousel{
    background-color: #eee;
    float:left;
    height:auto;
    margin-top: 10px;
    padding-bottom: 10px;
    width:100%;     
}
.price-Container {
    text-align: center; /* this will center the month and year columns */
}

.price-carousel .month-column{
    background-color: #fff;
    border: 1px solid;
    display: inline-block; /* add this line instead of float */
    height:120px;
    margin-left: 0;
    margin-top:35px;
    text-align: center;
    width:240px;
}
.price-carousel .year-column{
    border: 1px solid;
    background-color: #fff;
    display: inline-block; /* add this line instead of float */
    height:120px;
    margin-left: 30px;
    margin-right: -10%;
    margin-top:35px;
    text-align: center;
    width:240px;
}
.price-carousel .year-column h4, .price-carousel .month-column h4{
    background-color: #676767;
    color: #fff;
    height: 25px;
    margin-top: 0px;
    padding-top:5px;
    width: 100%;
}

<section class="carousel price-carousel">   <!--Price section -->
       <div class="container">
          <div class="price-Container">
                <div class="month-column">
                        <h4>Monthly</h4>
                        <p>$9.95</p>
                        <p class=”sub-text”>per computer</p>
                </div>
                 <div class="year-column"> 
                        <h4>Yearly</h4>
                        <p>$99</p>
                        <p class=”sub-text”>Save 20% when you pay anually</p>
                  </div>
          </div>
    </div>  
  </section>

【讨论】：

效果很好。谢谢。但是，当我对较小的屏幕尺寸使用媒体查询时，第二个会稍微靠上一点。有什么办法可以解决吗？ jsfiddle.net/d4gyo5s8/7
对于小屏幕，您将 30% 的宽度应用于两列。这会强制右列文本换行到第二行，这会增加高度，从而增加偏移量。您可以通过使列更宽或在两列 CSS 规则中的每一个中添加 vertical-align: bottom 来解决此问题。您可以将其添加到通用 CSS，而不是媒体查询版本。见：jsfiddle.net/audetwebdesign/d4gyo5s8/8

【解决方案2】：

我会发一个updated version of the JSFiddle

基本上我删除了 float :left|right 并添加了 CSS display: inline-block 以便您的两个公告确实充当内联块。当您有 text-align : center 时，块将自动在屏幕上居中。如果您想增加它们之间的空间，请随意添加一些边距。

【讨论】：

【解决方案3】：

http://jsfiddle.net/um0nyna3/

HTML：

<div class="wrapper">
    <div class="leftcol">
        test
    </div>
    <div class="rightcol">
        test
    </div>
</div>

CSS：

.wrapper {
    width: 500px;
    margin: 0 auto;
}
.leftcol {
    float: left;
    width: 49%;
    background-color: lightblue;
    margin-right: .5%;
    margin-left: .5%;
}
.rightcol {
    float: left;
    width: 49%;
    background-color: lightgreen;
    margin-right: .5%;
    margin-left: .5%;
}

这是一个很好的起点。

基本上，即使对于响应式网站，您也需要以百分比设置所有宽度。左侧或右侧的任何填充/边距也需要是百分比。测试一下。我没有添加任何媒体查询，因为这应该可以为您提供良好的基础。

【讨论】：