随着页面调整大小，获取两个并排的图像以减少和增加

Question

我有两个div并排坐着并包含图像。当网页大小与Macbook 13英寸屏幕相同时，照片就会完美地并排放置。然而，当我开始增加屏幕宽度时，照片开始分散，两者之间留下了巨大的差距。

即使浏览器页面增加或减少，如何让两张照片并排放置？ `

.pic {
  max-width: 100%;
}

#pic2 {
  max-width: 100%;
}

.photosection {
  background-color: black;
  max-width:1400;
  height:363px;
}

#photosection1 {
  float:left;
  max-width: 110vw;
}

#photosection2 {
  max-width:50%;
  float:right;
}

<div class="photosection">
  <div id="photosection1">
    <a  href="#" class="">
      <span class="text">
        Treat Yourself
        Intuitive Language Coaching
        (Intuitive Life-Coaching + Communication Training)
      </span>
      <img class="pic" src="images/oneonone.jpg" alt="inspiremug">
    </a> 
  </div>

  <div id="photosection2">
    <a  href="" class="">
      <span class="text">
        Treat Your Group, Business or Organization
        I'll bring the sweets!
      </span>
      <img id="pic2" src="images/groupsession.jpg" alt="necklace">
    </a> 
  </div>
</div>

Answer 1

你正在寻找这个吗？？

＆＃13;

＆＃13;

.pic {
 max-width: 100%;
   }

   #pic2 {
max-width: 100%;
 }

  .photosection {
    background-color: black;
    max-width:1400;
    height:363px;
       }

#photosection1 {
 float:left;
 max-width: 50%;
    }

    #photosection2 {
     max-width:50%;
     float:right;
      }

＆＃13;

<div class="photosection">


            <div id="photosection1">
             <a  href="#"  class="" >
            <span class="text">
              Treat Yourself
            Intuitive Language Coaching
            (Intuitive Life-Coaching + Communication Training)
              </span>

            <img class="pic" src="http://ias.kgisl.com/wp-content/uploads/2016/01/APJ-Abdul-Kalam.jpg"  alt="inspiremug">
            </a> 

        </div>

        <div id="photosection2">
            <a  href=""  class="" >
            <span class="text">
              Treat Your Group, Business or Organization
              I'll bring the sweets!
              </span>


            <img id="pic2" src="http://ias.kgisl.com/wp-content/uploads/2016/01/APJ-Abdul-Kalam.jpg"  alt="necklace">
            </a> 
        </div>

    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用div的display：inline-block属性，并将图片的大小调整为宽度：100％。

.pic {
 width: 100%;
   }

   #pic2 {
width: 100%;
 }

  .photosection {
    background-color: black;
    max-width:1400;
    height:363px;
       }

#photosection1 {
  display: inline-block;
 float:left;
 max-width: 50%;
    }

    #photosection2 {
      display: inline-block;
     max-width:50%;
     float:right;
      }

这有帮助吗？

Answer 3

#photosection1 {
    width: 50%;
    float: left
}

#photosection2 {
    width: 50%;
    float: right
}

添加宽度=＆＃34; 100％＆＃34;到你的图片标签

<img class="pic" src="images/oneonone.jpg" alt="inspiremug" width="100%">
<img id="pic2" src="images/groupsession.jpg" alt="necklace" width="100%">