如何正确实现此布局？

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类，自定义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>

Answer 3

Bootstrap 4有一个我们可以使用的名为.flex-row的类。

让我们仅使用Bootstrap类和flex来做到这一点。

1。。将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/

稍后，您可以使用内置于padding类中的Bootstraps来很好地腾出空间。