Css 如何使两个div均匀对齐

我试图渲染我的pafe的一部分，如下图所示。 当我让它在小屏幕上正常工作时（使用媒体查询），我无法在屏幕大小>768px的情况下获得它。它要么使两个盒子重叠，要么盒子两侧的空间不均匀。有什么办法可以修吗

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

月刊
9.95美元

每台计算机

每年
99美元

按年付款可节省20%

jsidle:

HTML:

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

这里有一个很好的起点

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

HTML:

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

这里有一个很好的起点

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

我将发布一个

基本上，我删除了

float:left | right

，并添加了CSS

display:inline块

，这样您的两个公告就可以充当内联块了。当您使用文本对齐：居中时，块将自动在屏幕上居中。如果你想增加它们之间的空间，请随意添加一些边距。

我将发布一篇文章

---

基本上，我删除了

float:left | right

，并添加了CSS

display:inline块

，这样您的两个公告就可以充当内联块了。当您使用文本对齐：居中时，块将自动在屏幕上居中。如果您想增加它们之间的空间，可以随意添加一些边距。

我将使用内联块，而不是浮动块，如下所示

.container{
保证金：0自动；
最大宽度：1050px；
}
.价格转盘{
背景色：#eee；
浮动：左；
高度：自动；
边缘顶部：10px；
垫底：10px；
宽度：100%；
}
.价格容器{
文本对齐：居中；/*这将使月份和年份列居中*/
}
.价格转盘.月份栏{
背景色：#fff；
边框：1px实心；
显示：内联块；/*添加此行而不是浮点*/
高度：120px；
左边距：0；
利润上限：35px；
文本对齐：居中；
宽度：240px；
}
.价格转盘.年份栏{
边框：1px实心；
背景色：#fff；
显示：内联块；/*添加此行而不是浮点*/
高度：120px；
左边距：30px；
保证金权利：-10%；
利润上限：35px；
文本对齐：居中；
宽度：240px；
}
.price carousel.year列h4、.price carousel.month列h4{
背景色：#6767；
颜色：#fff；
高度：25px；
边际上限：0px；
垫面：5px；
宽度：100%；
}

月刊
9.95美元

每台计算机

每年
99美元

按年付款可节省20%

我将使用内联块，而不是浮点数，如下所示

.container{
保证金：0自动；
最大宽度：1050px；
}
.价格转盘{
背景色：#eee；
浮动：左；
高度：自动；
边缘顶部：10px；
垫底：10px；
宽度：100%；
}
.价格容器{
文本对齐：居中；/*这将使月份和年份列居中*/
}
.价格转盘.月份栏{
背景色：#fff；
边框：1px实心；
显示：内联块；/*添加此行而不是浮点*/
高度：120px；
左边距：0；
利润上限：35px；
文本对齐：居中；
宽度：240px；
}
.价格转盘.年份栏{
边框：1px实心；
背景色：#fff；
显示：内联块；/*添加此行而不是浮点*/
高度：120px；
左边距：30px；
保证金权利：-10%；
利润上限：35px；
文本对齐：居中；
宽度：240px；
}
.price carousel.year列h4、.price carousel.month列h4{
背景色：#6767；
颜色：#fff；
高度：25px；
边际上限：0px；
垫面：5px；
宽度：100%；
}

月刊
9.95美元

每台计算机

每年
99美元

按年付款可节省20%

为什么要使用旋转木马？您是否有超过2个公告，并且希望一次显示2个？carousel只是一个类名，我使用它来捆绑分布在不同部分的一组字体。我试图在我的页面中显示图像中的内容。为什么要使用旋转木马？您是否有超过2个公告，并且希望一次显示2个？carousel只是一个类名，我使用它来捆绑分布在不同部分的一组字体。我试图在我的页面中显示图像中的内容。这非常好。谢谢。但是，当我使用媒体查询来缩小屏幕尺寸时，第二个屏幕稍微向上对齐。有什么办法可以修吗？对于小屏幕，对两列应用30%的宽度。这将强制右列文本换行到第二行，从而增加高度，从而增加偏移量。你可以