Question

所以我试图制作一个简单的产品页面，但是我在正确划分每个图像的图像和文本时遇到了问题，我拍了一个屏幕截图，说明了发生了什么以及发生了什么我想做。

代码（HTML）：

 <h1 style="color:#e68a00">Zona de produtos.</h1>
  <p style="color:#0080ff">Os melhores equipamentos aos melhores preços.</p>

    <div class="uk-grid">
      <div class="uk-width-1-3"><img src="/productimages/xxx1"></div>
      <div class="uk-width-1-3"><img src="/productimages/xxx2"></div>
      <div class="uk-width-1-3"><img src="/productimages/xxx3"></div>
      <br><br>
      <div class="uk-grid">
        <div class="uk-width-1-3"><h2>iPhone X 64GB</h2></div>
        <div class="uk-width-1-3"><h2> HP Pavilion</h2></div>
      </div>

    </div>

这就是我打算做的事情

Answer 1

试试这个!!!

<div style="text-align:center">
    <h1 style="color:#e68a00">Zona de produtos.</h1>
      <p style="color:#0080ff">Os melhores equipamentos aos melhores preços.</p>

        <div class="uk-grid">
          <div class="uk-width-1-3" ><img src="/productimages/xxx1">
          <h2>iPhone X 64GB</h2>
          </div>
          <div class="uk-width-1-3" ><img src="/productimages/xxx2">
          <h2> HP Pavilion</h2>
          </div>
          <div class="uk-width-1-3" ><img src="/productimages/xxx3"></div>
    </div>`enter code here`

Answer 2

您可能希望将文本移动到保存图像的div，然后根据您的要求设置位置和对齐方式。

<h1 style="color:#e68a00">Zona de produtos.</h1>
  <p style="color:#0080ff">Os melhores equipamentos aos melhores preços.</p>

    <div class="uk-grid">
      <div class="uk-width-1-3" style="text-align:center;"><img src="/productimages/xxx1">
      <h2>iPhone X 64GB</h2>
      </div>
      <div class="uk-width-1-3" style="text-align:center;"><img src="/productimages/xxx2">
      <h2> HP Pavilion</h2>
      </div>
      <div class="uk-width-1-3"><img src="/productimages/xxx3"></div>

Answer 3

您可以使用此代码

<h1 style="color:#e68a00">Zona de produtos.</h1>
<p style="color:#0080ff">Os melhores equipamentos aos melhores preços.</p>

<div class="uk-grid">
  <div class="uk-width-1-3">
    <img src="images/logo.jpg">
    <h2>iPhone X 64GB</h2>
  </div>
  <div class="uk-width-1-3">
    <img src="images/logo.jpg">
    <h2> HP Pavilion</h2>
  </div>
  <div class="uk-width-1-3">
    <img src="images/logo.jpg">
    <h2> HP Pavilion</h2>
  </div>
</div>

sub

Answer 4

我也会将图像和文本移动到@Eby Jacob提到的一个div中。然后你可以使用flex布局来处理宽度。

<html>
   <head>
      <style>
         .container{
            display: flex;
         }

         .container > div {
            flex: 1; /* The weight of the div */
            padding: 10px;
         }

         .productTitle {
            text-align:center;
         }

         .productDescription{
            text-align: justify;
            text-justify: inter-word;
         }         
      </style>
   </head>
   <body>

      <div class="container">
         <div >
            <img src="Computer.jpg" alt="Product Image"/>
            <h2 class="productTitle">Product title 1</h2>
            <p class="productDescription">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at ipsum vehicula, porta diam lobortis, vulputate lacus. Sed neque nunc, luctus vitae lorem vitae, pellentesque sodales arcu.
            </p>
         </div>

         <div class="product">
            <img src="Computer.jpg" alt="Product Image"/>
            <h2 class="productTitle">Product title 2</h2>
            <p class="productDescription">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at ipsum vehicula, porta diam lobortis, vulputate lacus. Sed neque nunc, luctus vitae lorem vitae, pellentesque sodales arcu.
            </p>
         </div>

         <div class="product">
            <img src="Computer.jpg" alt="Product Image"/>
            <h2 class="productTitle">Product title 3</h2>
            <p class="productDescription">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at ipsum vehicula, porta diam lobortis, vulputate lacus. Sed neque nunc, luctus vitae lorem vitae, pellentesque sodales arcu.
            </p>
         </div>
      </div>
   </body>
</html>

正确分割每个图像的图像和文本

4 个答案: