поведение div в отзывчивом дизайне

У меня возникли проблемы с получением некоторого контента на меньших экранах с использованием рамки Gantry в шаблоне Rockettheme Ionosphere. Я хотел бы иметь эти два div рядом друг с другом, но когда он отображается на маленьком экране, текст накладывается на следующий div.поведение div в отзывчивом дизайне

Есть ли способ, которым я могу сохранить этот основной центрированный вид на большом экране, а затем сделать второй div ниже на маленьком экране?

<div style="float: left; padding: 20px; width: 100%;"> 
<div style="float: left; width: 50%;"> 
<h2>Vegas All Nite, LLC</h2> 
Phone: (702)516-8852 <br /> Support: [email protected]<br />Reservations: [email protected]</div> 
<div style="float: left; width: 50%;"> 
<h2>Social Media</h2> 
FaceBook - Vegas All Nite<br /> Twitter - Coming Soon<br /> Google + - Coming Soon<br />YouTube - Coming Soon</div> 
</div>

источник

2013-12-04 Derrick Wallner

Вы можете добавить отображение в DIV с 50% в ширину

Использование дисплея: таблица в это сделает дивы идти один над другим, когда нет места для обоих

Пример здесь http://jsfiddle.net/tZC5Y/

<div style="float: left; padding: 20px; width: 100%;"> 
<div style="float: left; width: 50%;"> 
<h2>Vegas All Nite, LLC</h2> 
Phone: (702)516-8852 <br /> Support: [email protected]<br />Reservations: [email protected]</div> 
<div style="float: left; width: 50%;"> 
<h2>Social Media</h2> 
FaceBook - Vegas All Nite<br /> Twitter - Coming Soon<br /> Google + - Coming Soon<br />YouTube - Coming Soon</div> 
</div>

источник

2013-12-04 03:04:02 Juan

Да, с помощью медиа запросов. Установите класс для вашего внутреннего div - скажем .content. Затем в CSS применяются исходные правила стиля:

.content { 
    float:left; 
    width:50%; 
    word-wrap:break-word; 
}

В принципе, что вы имели в вашем инлайн CSS - с добавлением word-wrap:break-word правила (это будет убедиться, что ваш текст не пересекаться с другими div.

Затем вы создали медиа-запрос:.

@media screen and (max-width: 320px) { 
    .content { 
    width:100%; 
    } 
}

Это расширит вашему внутреннему DIVS полной ширину, которая сделает второе Диво падение под первым max-width правило в запросе медиа удостоверитсячто правила внутри этого блока применяются только к экранам с максимальной шириной 320 пикселей (которые вы можете изменить на любой желаемый размер).

источник

2013-12-04 03:06:39

Try ниже код ...

использование медиа-запросов с множеством класса внутренних дел.

<style type="text/css"> 
    .contentdiv 
    { 
     float: left; 
     width: 50%; 
    } 
    @media screen and (max-width: 480px) //You can change as you want. 
    { 
     .contentdiv 
     { 
      width: 100%; 
      float:none; 
     } 
    } 
</style> 
<div style="width: 100%;"> 
    <div style="padding: 20px;"> 
     <div class="contentdiv"> 
      <h2> 
       Vegas All Nite, LLC</h2> 
      Phone: (702)516-8852 
      <br /> 
      Support: [email protected]<br /> 
      Reservations: [email protected]</div> 
     <div class="contentdiv"> 
      <h2> 
       Social Media</h2> 
      FaceBook - Vegas All Nite<br /> 
      Twitter - Coming Soon<br /> 
      Google + - Coming Soon<br /> 
      YouTube - Coming Soon</div> 
     <div style="clear: both;"> 
     </div> 
    </div> 
</div>

источник

2013-12-04 06:06:01

поведение div в отзывчивом дизайне

ответ

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