Как правильно добиться этого макета?

Question

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

У меня есть этот код для достижения этого макета с помощью flexbox: http://jsfiddle.net/muLh5v4n/2/.Но он не работает должным образом, заголовок, дата публикации и категория не справа от изображения, находятся под изображением.

HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="bg-custom-gray-dark">
      <div class="container py-5">
        <div class="row">
          <div class="col">
            <ul class="list-group list">
              <li class="list-group-item bg-custom-light2 py-4">
                <div class="row align-items-center">
                  <form class="col-5">
                    <div class="form-group">
                      <div class="input-group list_search">
                        <div class="input-group-prepend">
                          <span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
                        </div>
                        <input type="text" class="form-control shadow-none search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
                      </div>
                    </div>
                  </form>
    
                  <div class="col-7 text-right">
                    <div class="dropdown filters mr-3">
                      <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Filter 2 <i class="fa fa-angle-down"></i>
                          </a>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Action</a>
                      </div>
                    </div>
                    <div class="dropdown filters">
                      <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Filter2 <i class="fa fa-angle-down"></i>
                          </a>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Action</a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="list-group-item d-flex align-items-center">
                <div class="post-info">
                  <img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
                  <h3>Title of the post</h3>
                  <span>post date</span>
                  <span>Categorqy of the post</span>
                </div>
                <div class="post-button ml-auto">
                  <button>Read</button>
                </div>
              </li>
              <li class="list-group-item">item2</li>
              <li class="list-group-item">item3</li>
              <li class="list-group-item">...</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

Answer 1

Это еще один подход.

ul {
     list-style-type: none;
     width: 500px;
     border: 1px solid gray;
     margin: 0;
     padding: 0;
}

.picture_round{
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-left: 20px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dsp_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle_section{
  flex: 1;
  text-align: left;
}

ul li button{
  margin-right: 20px;
}

ul li{
  padding: 10px 0px;
  border-bottom: 1px solid blue;
}

.title {
  text-transform: uppercase;
  font-weight: bolder;
}

.category{
  border: 1px solid gray;
  border-radius: 10px; 
  display: inline-block;
  padding: 5px 2px;
}

<ul>
	<li>
		<div class="dsp_flex">
			<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
			<div class="middle_section">
				<div class="title">title</div>
				<div class="description">lorem ipsum ipsum</div>
				<div class="category"> category </div>
			</div>
			<button>Button</button>
		</div>
	</li>
	<li>
		<div class="dsp_flex">
			<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
			<div class="middle_section">
				<div class="title">title</div>
				<div class="description">lorem ipsum ipsum</div>
				<div class="category"> category </div>
			</div>
			<button>Button</button>
		</div>
	</li>
  <li>
		<div class="dsp_flex">
			<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
			<div class="middle_section">
				<div class="title">titletitle title</div>
				<div class="description">lorem ipsum ipsum lorem ipsum ipsum</div>
				<div class="category"> categorycategory </div>
			</div>
			<button>Button</button>
		</div>
	</li>
</ul>

Answer 2

Bootstrap 4 имеет класс .flex-row, который мы можем использовать.

Позволяет делать это, используя только классы Bootstrap и flex.

1. Add flex-row класс list-group-item.

2. Добавьте d-flex к post-info.

3 .Поместите текст в d-flex flex-column div.

<li class="list-group-item d-flex flex-row align-items-center">
<div class="post-info d-flex">
    <img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
    <div class="d-flex flex-column">
        <h3>Title of the post</h3>
        <span>post date</span>
        <span>Categorqy of the post</span>
    </div>

</div>
<div class="post-button ml-auto">
    <button>Read</button>
</div>

JSFiddle: http://jsfiddle.net/muLh5v4n/13/

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

Answer 3

Вы можете попробовать использовать это;Вы можете далее стилизовать элементы;но в основном этот компонент должен отображаться так, как вы собираетесь.Также это с использованием только Bootstrap Classes , пользовательские CSS только для примера.

.list-item {
   max-width: 450px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-item border d-flex align-items-center">
   <div><img src="https://via.placeholder.com/100" class="rounded-circle" alt=""></div>
   <div class="ml-2">
      <h3>Title</h3>
      <p>some-text</p>
      <span>Span</span>
   </div>
   <div class="ml-auto mr-2"><button>Button</button></div>
</div>