css - 如何正确实现此布局？

我想要具有如下布局的列表项，其中带有图像的圆圈，圆圈的右侧是标题，帖子的日期，然后是帖子的类别。并在列表项的右侧应出现按钮。



我有以下代码使用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>

最佳答案

您可以尝试使用它；您可以进一步设置元素的样式；但基本上该组件应按预期显示。同样，这仅使用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>

关于css - 如何正确实现此布局？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53487404/