Как выравнивать два divs равномерно

Я пытаюсь отобразить раздел своего pafe, как на этом следующем изображении. http://i.imgur.com/63q9Syr.jpg , пока я получаю его для работы на небольших экранах (с использованием медиапотоков). Я не могу получить его для размера экрана> 768 пикселей. Это либо делает два ящика перекрывающимися, либо пространство на обеих сторонах ящиков не равно. Есть ли способ исправить это?Как выравнивать два divs равномерно

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

источник

2014-09-23 user3861559

Зачем использовать карусель? У вас есть более 2 объявлений и вы хотите показывать по 2 за раз? –

carousel - это просто имя класса, которое я использую, чтобы собрать кучу шрифтов, которые распространяются по разным разделам. Я пытаюсь показать, что находится на изображении на моей странице. – user3861559

Вместо поплавков я бы использовал встроенные блоки следующим образом.

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

источник

2014-09-23 18:59:10

Это работает отлично. Спасибо. Но, когда я использую медиа-запрос для меньшего размера экрана, второй выравнивается немного вверх. Есть ли способ исправить это? http://jsfiddle.net/d4gyo5s8/7/ – user3861559

Для небольших экранов вы применяете ширину 30% к двум столбцам. Это заставляет текст правого столбца обертываться во вторую строку, что увеличивает высоту, а значит и смещение. Вы можете исправить это, сделав столбцы более широкими или добавив 'vertical-align: bottom' к каждому из двух правил CSS столбца. Вы можете добавить его в общий CSS, а не версию медиа-запроса. См .: http://jsfiddle.net/audetwebdesign/d4gyo5s8/8/ –

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

Heres хорошая основа для Вас, чтобы начать с.

В принципе, чтобы получить его даже для чувствительного сайта, вам необходимо установить ширину в процентах. Любое дополнение/маржа слева или справа также должно быть процентным. Проверьте это. Я не добавлял никаких медиа-запросов, так как это должно дать вам хорошую базу.

источник

2014-09-23 18:58:45 Bioto

Я просто разместить updated version of the JSFiddle

В основном я удалил float :left|right и я добавил CSS display: inline-block так, что ваши два объявления действительно действуют как инлайн-блоки. Поскольку у вас есть text-align: center, тогда блоки будут автоматически центрироваться на экране. Не стесняйтесь добавлять некоторый запас, если хотите увеличить пространство между ними.

источник

2014-09-23 18:58:48

Как выравнивать два divs равномерно

ответ

Смежные вопросы