Question

我试图安排这样的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>

Answer 1

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

并相应的风格..希望这有帮助

需要帮助使用bootstrap安排div中的项目

1 个答案: