Question

因此，我正在为一个大学项目建立一个站点。问题是：我使用一个jsp来创建具有确定图案的每个产品，并将它们打印在网页上，但是这样做，我对将价格，名称和描述信息放置在何处有0控制。

现在，它将img移到左侧，将产品名称移到img的中间，在img下方有说明，然后是价格。我希望产品的名称移到img右侧的顶部，并在名称下进行描述。我该怎么办？

<section>
  <grid>
    <c:forEach items="${prodotti}" var="prodotto">
      <div class="row">
        <div class="col-sm-2">
          <a href="#"><img width="100%" src="https://colourlex.com/wp-content/uploads/2017/04/Peach-stone-black-painted-swatch-12010-opt.jpg"></a>

        </div>
        <div class="col-sm-8">
          <a class="testoricercaprodotto" href="Prodotto?id=${prodotto.id}">${prodotto.nome}</a>
          <h5>
            <p>${prodotto.descrizione}</p>
          </h5>
          <h6>Prezzo: ${prodotto.prezzo} &euro;</h6>
        </div>



      </div>
       <c:if test="${empty prodotti}">
                <div col="1">Nessun prodotto trovato.</div>
            </c:if>

    </c:forEach>
  </grid>
</section>`

this is what i see

Answer 1

您可以为此使用bootstrap，就像下面的代码一样，我将row分为image和description两部分。也请尝试以整页查看结果。即：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="container">
<section>
  <grid>
    <c:forEach items="${prodotti}" var="prodotto">
      <div class="row">
        <div class="col-sm-2">
          <a href="#"><img width="100%" src="https://colourlex.com/wp-content/uploads/2017/04/Peach-stone-black-painted-swatch-12010-opt.jpg"></a>

        </div>
        <div class="col-sm-8">
          <a class="testoricercaprodotto" href="Prodotto?id=${prodotto.id}">edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .</a>
          <h5>
            <p>edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .edit your post with changes you have made till now ,also screenshot of output you are getting , it would be more easier to help you then .</p>
          </h5>
          <h6>Prezzo: ${prodotto.prezzo} &euro;</h6>
        </div>
       


      </div>
       <c:if test="${empty prodotti}">
                <div class="row">Nessun prodotto trovato.</div>
            </c:if>

    </c:forEach>
  </grid>
</section>

</div>

Answer 2

您可以根据要放置图像的位置使用float: left/right。另外，不要忘记在包含您的内容的分区之后的元素中添加clear: both;，否则您可能会遇到一些问题。

如何将文字移动到图片的右侧

2 个答案: