Как выровнять три изображения в ряд

Question

В базе данных будет определенное количество изображений, которое будет неизвестно при перенаправлении этой страницы, что означает, что я не могу установить сумму div соответственно.Что мне нужно, это неважно, сколько там изображений, я хотел бы отобразить их в виде трех изображений подряд, четвертое начнется с левой стороны нового ряда.Я пытаюсь использовать col-md-4 и пытаюсь выровнять три изображения в ряду, но четвертое изображение находится в центре или справа от следующего ряда?

Это то, что я после.Допустим, в базе данных есть 5 изображений, я бы хотел, чтобы они отображались следующим образом

<div class="row col-md-12">
    @foreach($images as $image)
        <div class="col-md-4">
            <img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
            <div class="btn btn-primary edit-image-btn">Edit</div>
            <div class="btn btn-danger delete-image-btn">Delete</div>
        </div>
    @endforeach
</div>

Answer 1

Проблема

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

На самом деле вы можете одновременно использовать оба нижеприведенных решения, clearfix - наиболее подходящее и универсальное решение, но альтернативное решение имеет некоторые конструктивные преимущества.

clearfix Решение

Добавление div с .clearfix заставит систему координат создать то, что визуально выглядит как новая строка. Это лучшее решение , вы можете сравнить индекс изображения и добавить clearfix div для каждого третьего изображения.

Альтернативное решение

Вы можете разместить свои изображенияв качестве фона для div (вместо использования img тегов) и принудительно установить эти дивы height с использованием CSS.это не решает вашу проблему, это просто избегает ее.

Если вы установите background-size: cover; background-position: center center;, тогда все изображения будут покрывать доступное пространство, хотя вы потеряете часть изображения, это лучшее решение по дизайну (мои предпочтения).

Если имеетсявсе отображаемое изображение важно, тогда используйте background-size: contain;.

.col-xs-4 {
   padding:4px;
}
   
.image-div {
   height: 100px;
   background-size:cover;
   background-position: center center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Ej0hUpn6wbrOTJtRExp8jvboBagaz+Or6E9zzWT+gHCQuuZQQVZUcbmhXQzSG17s" crossorigin="anonymous">

<h4>Current Problem</h4>
<div class="container">
  <div class="col-md-12 row">

        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x600/000/fff"  width="100%" height="auto">
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>

       <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff" alt="alternative"  width="100%" height="auto" >

        </div>

   </div>
</div>


<h4>`clearfix` Solution</h4>
<div class="container">
  <div class="col-md-12 row">

        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x600/000/fff"  width="100%" height="auto">
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>
        
        <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff"  width="100%" height="auto">
            
        </div>
        
        <div class="clearfix"></div>

       <div class="col-xs-4">
            <img src="https://dummyimage.com/600x400/000/fff" alt="alternative"  width="100%" height="auto" >

        </div>

   </div>
</div>

<h4>Alternative Solution</h4>

<div class="container">
  <div class="col-md-12 row">

 
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x600/000/fff'); " >
</div>
        </div>
         
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
        </div>
         
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
        </div>
         
       <div class="col-xs-4">
            <div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
        </div>

   </div>
</div>

Answer 2

Проверьте ниже код и обновленную скрипку https://jsfiddle.net/dgmrsnb6/

<div class="container">
  <div class="row images-wrapper">
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
    <div class="col-md-4 col-sm-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
  </div>
</div>

Answer 3

Вы не должны использовать имена классов row и col в одном div:

<div class='row'>
    <div class="col-md-12">
        @foreach($images as $image)
            <div class="col-md-4">
                <img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
                <div class="btn btn-primary edit-image-btn">Edit</div>
                <div class="btn btn-danger delete-image-btn">Delete</div>
            </div>
        @endforeach
    </div>
</div>

Answer 4

<div class="row col-md-12">
    @foreach($images as $image)
        <div class="col-md-3">
            <img src="{{ $image->image }}" alt="{!! $image->title !!}" width="100" height="auto" >
            <div class="btn btn-primary edit-image-btn">Edit</div>
            <div class="btn btn-danger delete-image-btn">Delete</div>
        </div>
    @endforeach
</div>