Question

我有一个带有手机图像，合影和报价的div。

我在相对于图像的某个位置设置了“告诉我更多”按钮，当屏幕尺寸调整为移动时，我希望将它们保持在相同的位置。

有没有办法锁定div中的项目？

这是我的代码：

<div class="row">
      <div class="col-sm-4">
           <h4>Phone Systems</h4>
           <h4>for All Sized Businesses</h4>
           <div class='adPhotoBtn'>
           <img src='http://tele-verse.com/site/wp-content/uploads/2015/09/phone.png' alt='phone' />
           <a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Tell Me More</button></a>
           </div>
      </div>
      <div class="col-sm-4">
           <h4>Mitel MiCollab</h4>
           <h4>solutions to keep your</h4>
           <h4>business connected</h4>
           <div class='adPhotoBtn'>
           <img src='http://tele-verse.com/site/wp-content/uploads/2015/09/Collabphoto-transparent.png' alt='collaborate' />
           <a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Get Connected</button></a>
           </div>
      </div>
      <div class="col-sm-4">
           <img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/open-quotes.png' alt='"' />
           <p>I want you to know that we are very pleased with the quality of service Dan and the rest of your company provides. We sincerely appreciate your responsiveness and the way you conduct business.</p>
           <img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/close-quotes.png' alt='"' />
           <h6>MICHAEL GEIGER</h6>
           <h6>IT Manager - Precision Gear</h6>
      </div>
</div>

Answer 1

在项目中添加了div并设置了max-width似乎工作正常。

<div class="row">
      <div class="col-md-4 col-sm-4">
     <div class='homeAds'>
           <h4>Phone Systems</h4>
           <h4>for All Sized Businesses</h4>
           <div class='adPhotoBtn'>
           <img src='http://tele-verse.com/site/wp-content/uploads/2015/09/phone.png' alt='phone' />
           <a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Tell Me More</button></a>
           </div>
      </div>
      </div>
      <div class="col-md-4 col-sm-4">
     <div class='homeAds'>
           <h4>Mitel MiCollab</h4>
           <h4>solutions to keep your</h4>
           <h4>business connected</h4>
           <div class='adPhotoBtn'>
           <img src='http://tele-verse.com/site/wp-content/uploads/2015/09/Collabphoto-transparent.png' alt='collaborate' />
           <a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Get Connected</button></a>
           </div>
      </div>
      </div>
      <div class="col-md-4 col-sm-4">
     <div class='homeAds'>
           <img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/open-quotes.png' alt='"' />
           <p>I want you to know that we are very pleased with the quality of service Dan and the rest of your company provides. We sincerely appreciate your responsiveness and the way you conduct business.</p>
           <img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/close-quotes.png' alt='"' />
           <h6>MICHAEL GEIGER</h6>
           <h6>IT Manager - Precision Gear</h6>
     <div class='homeAds'>
      </div>
</div>

在移动调整大小时将div中的项目锁定到位

1 个答案: