css - 需要帮助，使用Bootstrap在div中安排元素

我正在尝试安排这样的div，但无法使其正常工作。

我得到的是这个

我的想法是将图像保留在其自己的列中，然后将其他列拆分为较小的行并在其中插入，但这似乎行不通。这是我的代码：

    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="row d-flex w-100 justify-content-between products-div">
        <div class="col-sm-1">
            <img [src]="prod.imagePath" class="product-page-images">
        </div>
        <div class="row">
            <div class="col-sm-10">
                <h3 class="mb-1">{{prod.name}}</h3>
                <p class="products-price-text">${{prod.price}}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <h5 class="mb-1">{{prod.seller}}</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <p class="mb-1">{{prod.description}}</p>
            </div>
        </div>
    </div>
</a>

最佳答案

的HTML

<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
  <div class="img-con">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
  </div>
</div>
<div class="col-md-11">
  <div class="row">
    <div class="col-md-12">
    <div class="clearfix">
      <div class="pull-left">
        <h3>Name</h3>
        <small>Seller</small>
      </div>
      <div class="pull-right">
      <h3>Price</h3>
      </div>
      </div>
    </div>
    <div class="col-md-12">
    <div class="desc">
    description
    </div>
    </div>
  </div>
</div>

</div>
</div></div>

的CSS

.main-container
{
  border:1px solid ;
}

.img-con
{
  height:100%;
  width:100%;
}
.img-con img
{
  max-width:inherit;
  max-height:inherit;
  height:100%;
  width:100%;
}

.desc
{
  border:1px solid;
}

reference link

和样式相应..希望这会有所帮助

关于css - 需要帮助，使用Bootstrap在div中安排元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44572424/