Question

我正在尝试对齐标题see the picture of it.。这适用于Chrome浏览器，但它不适用于所有设备，如i-phone，i-pad或其他设备。当我将视图更改为另一个设备时，它会合并

我标题的结构就像 |一个大图像（左侧）|图标 - 一些文字| icon1 icon2 |。

我尝试过很少的方法来做到这一点。但没有成功。下面是HTML代码和CSS代码。如果您需要进一步说明，请与我们联系。第一次堆栈溢出的用户。

P.S：图像在所有设备和浏览器中都有我想要的结果

<div class="row">
  <div id="header">


    <img  class="online-logo img-fluid" src="assets/images/online-logo.svg">
  <div class="header-cont">
    <div class="cap-cont">
        <img src="assets/images/some-icon.svg">
    <p style="cursor: pointer;">Some Text</p>

    </div>
</div>

  <div class="icon-cont">
</div>
</div>

#header
{
  width: 100%;
  text-align: center;
}

.online-logo {
  width: 18%;
  float: left;
  margin-top: 1%; 
}
.header-cont .cap-cont {
  width: 103%;
  display:inline-block;
  margin-top: 3%;

}

.icon-cont {
  background: rgb(235,244,250);
  height: 55px;
  width: 32%;
 float: right;
  margin-top: 18px;
  padding-right: 20px;
}

.header-cont .cap-cont p {
   color: #fff;
   font-size: 23px;
   font-weight: 600;
   text-align: left;
   padding-top: 10px;

}

 .header-cont .cap-cont img{
   width: 5%;
  /* float: left;*/
   margin-top: 2%;
   margin-right: 1%;
   margin-left: 1%;
 }
 .header-cont .cap-cont {
  background: rgb(97,131,156);
}

对齐所有设备中的标头

0 个答案: