隨着頁面調整大小，獲取並排的兩個圖像會減少和增加

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

您在尋找這個嗎？

 .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; } 

 <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> 

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
}

在圖片標簽中添加width =“ 100％”

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