时间戳

首页 > 解决方案 > 如何将文本移动到图像的右侧

html - 如何将文本移动到图像的右侧

问题描述

所以，我正在为一个大学项目建立一个网站。问题是：我使用一个 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>`

这就是我所看到的

标签： htmlcss

解决方案

您可以使用bootstrap它，就像在下面的代码中我将for和 for分为row两部分一样。也尝试在整页中查看结果。IE：imagedescription

<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>

推荐阅读