Question

我已将<p>个元素放在网页的不同位置。但是，这些元素在移动浏览器上相互叠加。如何从移动浏览器访问这些元素时，如何使这些元素响应？有关详细信息，请查看此网站上的蓝色框： http://www.cbssolutions.co.uk/software-development/

      <div class="con">
         <div class="row">
              <div class="col-lg-12">
                 <div class="servive-block servive-block-dark-blue">            
                    <i class="icon-2x color-light fa fa-gift"></i>
                    <h3 class="heading-md">Welcome</h3>           
                    <p class="p1">Element1</p>      
                     <p class="p2">Element2</p>
                         <p class="p3">Element3</p>
                         <p class="p4">Element4</p> 
               </div>
            </div>      
               </div>     <!-- End Of Row -->
           </div>     <!-- End Of Container -->


.servive-block {
  padding: 40px 30px;
  text-align: center;
  margin-bottom: 20px;

}
.con {
  margin: 0 auto;
  width: 100%;     
}


.servive-block h3 {
  color: #fff;
}

.servive-block h3a:hover{
  text-decoration: none;
}

.servive-block-light,
.servive-block-default {
  background: #fafafa;
  border: solid 1px #eee; 
}

.servive-block-default:hover {
  box-shadow: 0 0 8px #eee;
}

.servive-block-dark-blue {
  background: #4765a0;

.p1{
    position: absolute;
    bottom: 120px;
    left: 60px;    
}
.p2{
    position: absolute;
    bottom: 30px;
     left: 60px;
}
.p3{
     position: absolute;
    top: 120px;
    left: 1000px;
}
.p4{

     position: absolute;
    bottom: 120px;
    left: 1000px;

}

Answer 1

您可以使用像bootstrap这样的框架轻松完成此操作。如果您使用bootstrap，您的代码将如下所示：

    <div class="container">
     <div class="row">
          <div class="col-xs-12">
             <i class="icon-2x color-light fa fa-gift"></i>
                <h3 class="heading-md">Welcome</h3>   
           </div>
           <div class="col-xs-12 col-md-3">
             <p class="p1">Element1</p>
           </div>
           <div class="col-xs-12 col-md-3">
             <p class="p1">Element2</p>
           </div>
           <div class="col-xs-12 col-md-3">
             <p class="p1">Element3</p>
           </div>
           <div class="col-xs-12 col-md-3">
             <p class="p1">Element4</p>
           </div>
           </div>     <!-- End Of Row -->
       </div>     <!-- End Of Container -->

这是一个工作jsfiddle的链接。 https://jsfiddle.net/3h44eh4z/

如何使位于不同位置的p元素响应？

1 个答案: