Question

我正在尝试渲染我的pafe的一部分，如下图所示。 http://i.imgur.com/63q9Syr.jpg 虽然我让它适用于较小的屏幕（使用媒体队列）我无法获得屏幕尺寸＆gt; 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/

Answer 1

我将使用内联块而不是浮点数。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

我发布updated version of the JSFiddle

基本上我删除了float :left|right并添加了CSS display: inline-block，这样您的两个公告确实可以作为内联块。当你有text-align：center时，块会自动居中在屏幕上。如果你想增加它们之间的空间，可以随意增加一些余量。

Answer 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%;
}

这是你开始的良好基础。

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

如何均匀对齐两个div

3 个答案: