html - 加宽CSS中的几个垂直条

Question

我正在学习 CSS，我想加宽我的垂直条，但我不知道该怎么做？

这是我的问题的截图

我想了解如何加宽竖线？

关于垂直条有几个答案，但我没有找到解决我的问题的方法。

感谢您的帮助，因为我真的被困住了。

.container{
  width: 96%;
  margin: auto;
}


.box_items{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;

}

.img-logo{
  height: 28px;
}

.box{
  width: 21%;
  height: 200px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
}

.main{
  display: flex;
  text-align: left;
  width: 90%;
  border-right: 1px solid ;

}


.titre{
  font-size: 28px;
  padding-left: 15px;

}

.texto{
  padding-top: 30px;
}

.img-logo-02{
  margin-right: 5px;
}

<div class="container">
  <div class="box_items">

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/mz4v.png' alt="image">
       <div class="titre">Telephone</div>
     </div>

      <div class="texto">Just For VIP Member</div>

    </div>

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/wgl0.png' alt="image">
       <div class="titre">E-Mail Us</div>
      </div>

       <div class="texto">admin@superbtc.biz</div>

    </div>

   <div class="box">
     <div class="main">
        <img class="img-logo" src='https://zupimages.net/up/20/34/epbs.png' alt="image">
        <div class="titre">Follow us</div>
     </div>

     <div class="texto"><a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/pnpm.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/qgz1.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/gdph.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/alck.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/evtq.png' alt="image"></a>
      </div>
    

     </div>

     <div class="box">
       <div class="main">
         <img class="img-logo" src='https://zupimages.net/up/20/34/txjb.png' alt="image">
         <div class="titre">Address</div>
       </div>

        <div class="texto">2699 BORAMBOLA, New South Wales,Australia.</div>

    </div>

  </div>


</div>
    

Answer 1

在.box类中添加border-right: 1px solid;和height: auto;

.container{
  width: 96%;
  margin: auto;
}


.box_items{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;

}

.img-logo{
  height: 28px;
}

.box{
  width: 21%;
  height: 200px;
  /*border-radius: 5px;*/
  position: relative;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
  
  border-right: 1px solid;
  height: auto;
}

.main{
  display: flex;
  text-align: left;
  width: 90%;
  /*border-right: 1px solid ;*/

}


.titre{
  font-size: 28px;
  padding-left: 15px;

}

.texto{
  padding-top: 30px;
}

.img-logo-02{
  margin-right: 5px;
}

<div class="container">
  <div class="box_items">

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/mz4v.png' alt="image">
       <div class="titre">Telephone</div>
     </div>

      <div class="texto">Just For VIP Member</div>

    </div>

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/wgl0.png' alt="image">
       <div class="titre">E-Mail Us</div>
      </div>

       <div class="texto">admin@superbtc.biz</div>

    </div>

   <div class="box">
     <div class="main">
        <img class="img-logo" src='https://zupimages.net/up/20/34/epbs.png' alt="image">
        <div class="titre">Follow us</div>
     </div>

     <div class="texto"><a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/pnpm.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/qgz1.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/gdph.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/alck.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/evtq.png' alt="image"></a>
      </div>
    

     </div>

     <div class="box">
       <div class="main">
         <img class="img-logo" src='https://zupimages.net/up/20/34/txjb.png' alt="image">
         <div class="titre">Address</div>
       </div>

        <div class="texto">2699 BORAMBOLA, New South Wales,Australia.</div>

    </div>

  </div>


</div>