Блог

Главная - Вопросы по программированию - Текст, охватывающий множество столбцов

Текст, охватывающий множество столбцов

#html #css

#HTML #css

Вопрос:

Итак, я работаю над страницей tumblr, и то, что я хочу, — это разборные divs, которые охватывают несколько столбцов. Мне удалось заставить divs свернуться и охватить столбцы умножения. Проблема заключается в содержимом внутри этих разделов. Они охватывают несколько столбцов, когда я хочу, чтобы содержимое оставалось в своем собственном столбце. Я добавил диапазон столбцов, но он ничего не сделал.

CSS:

 .active, .collapsible:hover {
  background-color: #555;
}

.content {
  column-span: 1;
  width:250px;
  max-height:0px;
  padding: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: ;
}

#columns {
    column-span: 1;
    margin-left: 0px;
    width: 840px;
    column-count: 3;
    column-gap: 0px;
}

/* Body */

body {
    background: #f4f4f4;
    margin:0px;
    padding:0px;
}

#container {
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
    width:700px;
}

#calender {
    width:250px;
    margin-left:-18px;
    margin-bottom:10px;
    padding: 0 18px;
}

.calender-month {
    width:250px;
    height:36px;
    padding-top:4px;
    padding-bottom:3px;
    margin-bottom:5px;
    color:#ffffff;
    font-family:Bebas Neue;
    font-size:18pt;
    text-align:center;
    background:#aabca6;
    cursor: pointer;
    outline: none;
    border:none;
}

#calender-border {
    height:30px;
    border:1px #e7e7e7 solid;
    margin-bottom:5px;
}

.calender-date {
    float:left;
    width:30px;
    padding-top:4px;
    padding-bottom:4px;
    color:#ffffff;
    font-family: Nunito;
    font-size:12pt;
    text-align:center;
    background:#f2bfad;
}

.calender-input {
    float:right;
    width:213px;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:4px;
    font-family: Nunito;
    font-size:12pt;
    background:#fff;
}

HTML:

 <div id="container">

  <section id="columns">

<!-- CALENDER-->

<button class="calender-month">January</button>
<div class="content">

    <div id="calender-border">
    <div class="calender-date">05</div> <div class="calender-input">Gun Napat 98'</div>
    </div>
    
    <div id="calender-border">
<div class="calender-date">12</div> <div class="calender-input">Boom Krittapak 01'</div>
    </div>
    
      <div id="calender-border">
    <div class="calender-date">20</div> <div class="calender-input">Off Jumpol 91'</div>
    </div>
    
    <div id="calender-border">
<div class="calender-date">23</div> <div class="calender-input">Nat Sakdatorn 83'</div>
    </div>
    
    <div id="calender-border">
<div class="calender-date">27</div> <div class="calender-input">Benjamin Brasier 97'</div>
    </div>
    
       <div id="calender-border">
    <div class="calender-date">30</div> <div class="calender-input">New Thitipoom 93'</div>
    </div>
    
     <div id="calender-border">
<div class="calender-date">31</div> <div class="calender-input">Copter Panuwat 97'</div>
    </div>

</div>

</div>

Предварительный просмотр в реальном времени здесь

Ответ №1:

Я не уверен, что это то, что вы хотите. Попробуйте удалить column-count: 3; #columns

Комментарии:

1. Нет, я все еще хочу, чтобы div охватывал столбцы умножения. Я просто не хочу, чтобы содержимое внутри этих разделов делало то же самое. Таким образом, январь, май и сентябрь должны быть рядом друг с другом. Только содержимое внутри января не должно быть в том же столбце, что и в мае.

2. поместите сюда фрагмент кода, чтобы мы могли разобраться.