Div с 2 столбцами. Как обернуть содержимое div? Дополнительное пространство слева и справа - PullRequest
Новая
       0

Div с 2 столбцами. Как обернуть содержимое div? Дополнительное пространство слева и справа

0 голосов
/ 19 апреля 2020

MOV ie класс имеет два столбца класса. Но два столбца div не очень хорошо вписываются в mov ie div. слева и справа есть пробел. Как правильно разместить два столбца div в mov ie div?

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

Ответы [ 3 ]

0 голосов
/ 19 апреля 2020

Вы должны создать новый div в качестве контейнера для своей карты mov ie, поскольку ваши стили переопределяют структуру bootstrap для столбцов.

HTML 

<div class="col-12 col-md-6 col-lg-4">
  <div class="movie">
    <div class="column">
      <div class="title"><?= $movie["title"] ?></div>
      <div class="year">(<?= $movie["year"] ?>)</div>
      <div class="box-office">
        Box Office:
        <?= $movie["box-office"] ?>
      </div>
    </div>
    <div class="column">
      <img width = "80%" src= "posters/<?= $movie["poster"]?>"
      alt=“Poster” >
    </div>
  </div>
</div>

CSS

.movie {
  border: 1px solid lightgray;
  border-radius: 20px;
  overflow: hidden;
  margin: 1rem;
}

.column {
  float: left;
  width: 50%;
}
0 голосов
/ 19 апреля 2020

Пожалуйста, попробуйте этот код: 

         <style>
    .movie{


    }
    .inner-col {
       border: 1px solid lightgray;
        border-radius: 20px;
        overflow: hidden;
        /*margin: 2px  10px; */
        overflow: hidden;
    }

    .column {
        float: left;
        width: 50%;        
    }
</style>

<body>

<div class="container">
        <div class="row">
            <?php foreach ($movies as $movie) { ?>
                <div class="movie col-12 col-md-6  col-lg-4 "> 
                <div class="inner-col">
                        <div class="column">
                            <div class = "title"><?= $movie["title"] ?></div>
                            <div class = "year">(<?= $movie["year"] ?>)</div>
                            <div class = "box-office">Box Office: <?= $movie["box-office"] ?></div> 
                        </div>
                        <div class = "column">
                            <img width = "80%" src= "posters/<?= $movie["poster"]?>" alt=“Poster” >
                        </div> 
                </div>                  
                </div>



            <?php } ?>
        </div>
    </div></body>
0 голосов
/ 19 апреля 2020

Попробуйте добавить отступ вместо поля. Это единственное решение. Спасибо 

.movie{
    border: 1px solid lightgray;
    border-radius: 20px;
    overflow: hidden;
    width: 33%;
    /*margin: 2px  10px; */
    padding: 2px 10px;
    overflow: hidden;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...