Плавающих дивы пытаются держать отзывчивого

#body { 
 
    background-color: rgba(51, 5, 22, 0.5); 
 
    padding: 0.5em; 
 
    overflow: hidden; 
 
} 
 
#category, #mission { 
 
    text-transform: uppercase; 
 
    font-weight:bolder; 
 
    float: left; 
 
} 
 
#mission { 
 
    margin-left: 8em; 
 
} 
 
.category-picked, .mission-picked { 
 
    text-transform: none; 
 
    font-weight: normal; 
 
}

<!-- BODY SECTION START !--> 
 
    <div id="body"> 
 
     <div id="category"> 
 
      <div class="category-header"> 
 
       Category 
 
      </div> 
 
      <div class="category-picked"> 
 
       Random Picked Oneeeeeee 
 
      </div> 
 
     </div> 
 
     <div id="mission"> 
 
      <div class="mission-header"> 
 
       Mission 
 
      </div> 
 
      <div class="mission-picked"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis metus nibh, placerat vitae vehicula eu, lobortis id eros. Nam ac ipsum enim. Cras in elit sed ligula accumsan venenatis. Fusce interdum, nibh eleifend ullamcorper gravida, enim augue tristique orci, a fringilla mi velit sed erat. Sed nulla augue, tempus eu nisl a, tincidunt egestas magna. Mauris non nulla tempus, tincidunt nibh at, scelerisque velit. Mauris vulputate ut odio id ultrices. Fusce et pulvinar metus. Nullam suscipit accumsan libero eu fringilla. Curabitur vulputate eu metus quis dapibus. Etiam dapibus mi eu mi lacinia, id facilisis orci dapibus. Donec vel nisi hendrerit, facilisis quam interdum, facilisis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- BODY SECTION END !-->

Я пытаюсь сделать разделенные дивы, но должен быть остаться рядным. Я стараюсь избегать использования table и дать моим divs width, чтобы они оставались отзывчивыми.

Как вы видите, что divs толкают друг друга, я хочу, чтобы они оставались inline, как если бы текст был коротким. Как мне это сделать?

Я также скрипку он https://jsfiddle.net/63s8hadd/

источник

2016-02-27 J. Doe

Вы должны установить ширину на дивы ... используя проценты ,, и корректировать их в запросах медиа ... но это не ясно, как это должно выглядеть. –

Что случилось с 'display: table'? https://jsfiddle.net/azizn/5t253yvx/ – Aziz

@ Азиз, который делает трюк за меня, спасибо, я говорил о html 'table', не знал об этом! –

Проверить это,

#body { 
 
    background-color: rgba(51, 5, 22, 0.5); 
 
    padding: 0.5em; 
 
    overflow: hidden; 
 
} 
 
#category, #mission { 
 
    text-transform: uppercase; 
 
    font-weight:bolder; 
 
    /*float: left;*/ 
 
} 
 
#mission { 
 
    /*margin-left: 8em; Why? */ 
 
} 
 
.category-picked, .mission-picked { 
 
    text-transform: none; 
 
    font-weight: normal; 
 
} 
 
.table{ 
 
    display: table; 
 
} 
 
.tr{ 
 
    display: table-row; 
 
    } 
 
.td{ 
 
    display: table-cell 
 
}

<!-- BODY SECTION START !--> 
 
    <div id="body" class="table"> 
 
     <div id="category" class="tr"> 
 
      <div class="category-header td"> 
 
       Category 
 
      </div> 
 
      <div class="category-picked td"> 
 
       Random Picked Oneeeeeee 
 
      </div> 
 
     </div> 
 
     <div id="mission" class="tr"> 
 
      <div class="mission-header td"> 
 
       Mission 
 
      </div> 
 
      <div class="mission-picked td"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis metus nibh, placerat vitae vehicula eu, lobortis id eros. Nam ac ipsum enim. Cras in elit sed ligula accumsan venenatis. Fusce interdum, nibh eleifend ullamcorper gravida, enim augue tristique orci, a fringilla mi velit sed erat. Sed nulla augue, tempus eu nisl a, tincidunt egestas magna. Mauris non nulla tempus, tincidunt nibh at, scelerisque velit. Mauris vulputate ut odio id ultrices. Fusce et pulvinar metus. Nullam suscipit accumsan libero eu fringilla. Curabitur vulputate eu metus quis dapibus. Etiam dapibus mi eu mi lacinia, id facilisis orci dapibus. Donec vel nisi hendrerit, facilisis quam interdum, facilisis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- BODY SECTION END !-->

скрипку: https://jsfiddle.net/63s8hadd/1/

Примечание: значения "инлайн-таблица", вкладка» le "," table-caption ", " table-cell "," table-column "," table-column-group "," table-row "и " table-row-group "не поддерживаются в IE7 и раньше. Для IE8 требуется ! DOCTYPE. IE9 поддерживает значения.

исх: http://www.w3schools.com/cssref/pr_class_display.asp

источник

2016-02-27 18:21:47 kolunar

Плавающих дивы пытаются держать отзывчивого

ответ

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