Question

无法弄清楚如何像在照片上那样对齐此项目

从我的原型制作一个网页设计，但是堆叠在这里，尝试了许多变体，无法弄清楚，这就是我所拥有的。

如果您能以某种方式提供帮助，那就太好了。[这应该是1。

<div class="container-fluid bg-light">
<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
            <h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        </div>
    </div>

    <div class="row">
        <div class="col">
           <h1 class="text-left pqesbtitle">Garantizar </h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

        <div class="col">
           <h1 class="text-left pqesbtitle">Soporte</h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

    </div>
    <div class="row">
        <div class="col text-center">
            <img class="pqeimg"src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
        </div>
    </div>

        <div class="row">
        <div class="col">
           <h1 class="text-left pqesbtitle">Instalación</h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

        <div class="col">
           <h1 class="text-left pqesbtitle">Innovaciones</h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

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

Answer 1

我想您正在使用Bootstrap。

看看，也许这就是您想要的：）

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid bg-light">
    <div class="container">
      <div class="row">
        <div class="col" style="text-align: center;">
          <h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
          <h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4">
          <div class="row">
            <div class="col-xs-12">
              <div class="mini-box">

                <h1 class="text-left pqesbtitle">Garantizar </h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="mini-box">
                <h1 class="text-left pqesbtitle">Soporte</h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="big-box text-center">
            <img class="pqeimg" src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
          </div>
        </div>
        <div class="col-xs-4">
          <div class="row">
            <div class="col-xs-12">
              <div class="mini-box">

                <h1 class="text-left pqesbtitle">Instalación</h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="mini-box">
                <h1 class="text-left pqesbtitle">Innovaciones</h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>

大家好，我是网页设计的新手，需要一些建议

1 个答案: