Почему не правильно отображается css?

168

13 марта 2019, 04:30

Прстой акардеон. Хочу при раскрывающем списке разбить на две колонке Но при использовании float:left .col-md-6{width:33;float:left} Оно западает за другой пункт

Показано в демо

(function () { 
    'use strict'; 
    $('.accordion').on('click', '.titlle', function (event) { 
        event.preventDefault(); 
        $('.titlle').not($(this)).siblings('.content').slideUp('normal'); 
        $('.titlle').not($(this)).removeClass("active"); 
        $(this).siblings('.content').slideToggle('normal'); 
        $(this).toggleClass("active"); 
    }); 
    $('.accordion .content').hide(); 
    $('.accordion .active').next().slideDown('normal'); 
})();

section.accordion { 
    margin: 0 0 15px 10px; 
    padding: 1px 1px; 
} 
.titlle { 
    background: #fff none repeat scroll 0 0; 
    border: 1px solid #ddd; 
border-radius: 30px; 
    color: #333; 
    display: block; 
    font-size: 18px; 
    font-weight: 600; 
       padding: 8px 20px 10px 52px; 
    position: relative; 
 
} 
.col-md-6{width:33;float:left} 
.titlle a{color:#000!important;} 
.active  { 
    background: #ffb900 none repeat scroll 0 0; 
    border: 1px solid transparent; 
    border-radius: 30px; 
    color: #fff; 
    transition: all 0.3s ease 0s; 
} 
.active a{color:#fff!important;} 
 
.content p { 
    border-left: 1px dashed #8c8c8c; 
    padding-left: 25px; 
} 
   .content {padding: 20px 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
 
<section class="accordion"> 
<div class="titlle"><a href="#">Главная</a></div> 
<div class="content"> 
 
<div class="col-md-6"> 
текст текст 
тексттекст 
<img src="//biznessystem.ru/wp-content/uploads/2016/05/mediafajly.png" alt="Коробчатого сечения, сварная балка из листового проката" width="272" height="222" class="alignnone size-full wp-image-839" />  
</div> 
<div class="col-md-6"> 
текст текст 
тексттекст 
<img src="//biznessystem.ru/wp-content/uploads/2016/05/mediafajly.png" alt="Коробчатого сечения, сварная балка из листового проката" width="272" height="222" class="alignnone size-full wp-image-839" />  
</div> 
</div> 
</section> 
 
<section class="accordion"> 
<div class="titlle"><a href="#">лектрическая</a></div> 
<div class="content"> 
 
Renewal of Mission Labour Card (Application+ Submission) 3 
 
</div> 
</section>

Answer 1

div с классом row пропущен, да и в этом варианте float: left не нужен

(function() { 
  'use strict'; 
  $('.accordion').on('click', '.titlle', function(event) { 
    event.preventDefault(); 
    $('.titlle').not($(this)).siblings('.content').slideUp('normal'); 
    $('.titlle').not($(this)).removeClass("active"); 
    $(this).siblings('.content').slideToggle('normal'); 
    $(this).toggleClass("active"); 
  }); 
  $('.accordion .content').hide(); 
  $('.accordion .active').next().slideDown('normal'); 
})();

section.accordion { 
  margin: 0 0 15px 10px; 
  padding: 1px 1px; 
} 
 
.titlle { 
  background: #fff none repeat scroll 0 0; 
  border: 1px solid #ddd; 
  border-radius: 30px; 
  color: #333; 
  display: block; 
  font-size: 18px; 
  font-weight: 600; 
  padding: 8px 20px 10px 52px; 
  position: relative; 
} 
 
.col-md-6 { 
  width: 33; 
} 
 
.titlle a { 
  color: #000!important; 
} 
 
.active { 
  background: #ffb900 none repeat scroll 0 0; 
  border: 1px solid transparent; 
  border-radius: 30px; 
  color: #fff; 
  transition: all 0.3s ease 0s; 
} 
 
.active a { 
  color: #fff!important; 
} 
 
.content p { 
  border-left: 1px dashed #8c8c8c; 
  padding-left: 25px; 
} 
 
.content { 
  padding: 20px 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
 
<section class="accordion"> 
  <div class="titlle"><a href="#">Главная</a></div> 
  <div class="content"> 
    <div class="row"> 
      <div class="col-md-6"> 
        текст текст тексттекст 
        <img src="//biznessystem.ru/wp-content/uploads/2016/05/mediafajly.png" alt="Коробчатого сечения, сварная балка из листового проката" width="272" height="222" class="alignnone size-full wp-image-839" /> 
      </div> 
      <div class="col-md-6"> 
        текст текст тексттекст 
        <img src="//biznessystem.ru/wp-content/uploads/2016/05/mediafajly.png" alt="Коробчатого сечения, сварная балка из листового проката" width="272" height="222" class="alignnone size-full wp-image-839" /> 
      </div> 
    </div> 
  </div> 
</section> 
 
<section class="accordion"> 
  <div class="titlle"><a href="#">лектрическая</a></div> 
  <div class="content"> 
 
    Renewal of Mission Labour Card (Application+ Submission) 3 
 
  </div> 
</section>