Как я могу это исправить?Карта из DIV

Question

Я пытаюсь перечислить рядом аниме-список с изображениями и именами на карте, но DIV заканчивается, а изображение игнорируется и продолжается, как мне решить эту проблему?

URL: Здесь

Изображение: Изображение

css:

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    min-width: 199px;
    max-width: 200px;
    float:left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left:5px;
    margin-top:10px;
}

HTML:

<div class="container">
    <div class="card">
    <button class="btn btn-success add" onclick="novoEpisodio(85)"><span class="fa fa-plus"></span> Adicionar Episódio</button>
                <img onclick="escolherAnime(85)" src="https://4.bp.blogspot.com/-TYMOypUwSGI/WcqOASxepZI/AAAAAAAAK2w/-_V0RHPcEj8d0IO79AyUf2oUFTRRa3TjgCLcBGAs/s1600/Black-Clover-anime-poster-visual-v1.jpg" style="min-width:199px; max-width:200px; min-height:299px; max-height: 300px;">
                <div class="container">
                  <h4><b>Black Clover</b>

                  </h4>

                </div>
                 </div>

Answer 1

Прежде всего, версия Bootstrap вашего сайта устарела с используемым вами синтаксисом HTML. Карты заменены панели из Bootstrap 3 .Вы используете Bootstrap 3 , посмотреть здесь , который использует панели.

Многое изменилось между Bootstrap 3 и 4. Я настоятельно рекомендую вам использовать Bootstrap 4 .Кроме того, ваш синтаксис HTML не совпадает с традиционным макетом.

container > row > column > card

Вот Codepen , с которым можно разветвляться и играть.

Вот пример того, что вам нужно с помощью Bootstrap 4.

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}


/* Custom CSS */
.text-strong {
  font-weight: bold;
}

.card-body {
  padding: .5rem;
}

.card-title {
  margin: 0;
}

.card {
  border: 2px dashed black;
  box-shadow: 0px 10px 20px rgba(150,150,150,.5);
}

.card:hover {
  box-shadow: 0px 10px 20px  rgba(60, 141, 188,0.5);
}

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js'></script>

<div class="container-fluid p-5">
  <div class="row no-gutters">
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Bleach</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Black Clover</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Boku dake ga in...</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Dragon Ball Super</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Nanatsu no Taizai</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Naruto Shippuden</h5>
        </div>
      </div>
    </div>    
  </div>
</div>