关于在div中并排对齐图像和内容

Question

我在HTML页面中有四个部分，其中有四个按钮。单击任何一个按钮时，将显示相应于该按钮的一个弹出模式。在那个模式弹出，我想要关闭按钮在顶部右侧，图像和内容应该正确对齐（从所有的边距相等）并排。我希望每个模式弹出显示在中心。此外，我希望如果我单击模态弹出窗口之外，模态弹出窗口应该关闭。有一次，应该只显示一个模态弹出，但如果我单击外部，它会显示另一个模态弹出，高于前面的。请帮帮我，我完全搞不清如何做到这一点。

null

js lang-js prettyprint-override"> // For button 1
    var modal1 = document.getElementById("myModal1");
    var btn1 = document.getElementById("btn1");
    var span1 = document.getElementsByClassName("close1")[0];
    
     
    btn1.onclick = function() {
      modal1.style.display = "block";
    }
    
    span1.onclick = function() {
      modal1.style.display = "none";
    }
    
    // For button 2
    var modal2 = document.getElementById("myModal2");
    var btn2 = document.getElementById("btn2");
    var span2 = document.getElementsByClassName("close2")[0];
    
     
    btn2.onclick = function() {
      modal2.style.display = "block";
    }
    
    span2.onclick = function() {
      modal2.style.display = "none";
    }
    
    // For button 3
    var modal3 = document.getElementById("myModal3");
    var btn3 = document.getElementById("btn3");
    var span3 = document.getElementsByClassName("close3")[0];
    
     
    btn3.onclick = function() {
      modal3.style.display = "block";
    }
    
    span3.onclick = function() {
      modal3.style.display = "none";
    }
    
    // For button 4
    var modal4 = document.getElementById("myModal4");
    var btn4 = document.getElementById("btn4");
    var span4 = document.getElementsByClassName("close4")[0];
    
     
    btn4.onclick = function() {
      modal4.style.display = "block";
    }
    
    span4.onclick = function() {
      modal4.style.display = "none";
    }

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
    
    html, body{
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    button{
      width: 50%;
      height: 50%;
      float: left;
      margin: 0;
      padding: 0;
      cursor: pointer;
      text-align: center;
      position: relative;
    }
    
    button span {
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      font-family: 'Roboto',sans-serif;
      font-size: 70px;
      color: transparent;
    }
    
    button img{
      width: 100%;
      height: 100%;
    }
    
    button:hover img{
      opacity: 0.4;
    }
    
    button:hover span{
      color: darkblue;
    }
    
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 50%;
      height: 50%;
      border: 2px solid black;
      border-radius: 5px;
    }
    
    #modal-content {
      background-color: #fefefe;
      margin: 30% 50%;
      padding: 30px 5px 5px 5px;
      border: 1px solid #888;
      width: 100%;
      height: 80%;
    }
    
    #close {
      float: right;
      width: 1.5rem;
      line-height: 1.5rem;
      text-align: center;
      cursor: pointer;
      border-radius: 0.25rem;
      background-color: lightgray;
    }
    
    #close:hover,
    #close:focus {
      background-color: darkgray;
    }
    
    p, img{
      display: flex;
    }
    
    img{
      float: left;
      width: 45%;
      padding: 0;
      margin: 0;
    }
    
    p{
      float: right;
      text-align: justify;
      width: 50%;
      padding: 0;
      margin: 0;
    }

 <button id="btn1"><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>
    
        <div id="myModal1" class="modal">
          <div id="modal-content" class="modal-content1">
            <span id="close" class="close1">x</span>
            <img src="https://images.unsplash.com/photo-1577516311194-eb14c570a137?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
            <p id="content">
              The Himalayas are a mountain range in South Asia The Himalayas are a mountain range in South Asia.The west end is in Pakistan. They run through Jammu and Kashmir, Himachal Pradesh,Uttaranchal, Sikkim and Arunachal Pradesh states in India, Nepal, and Bhutan. The east end is in the south of Tibet. They are divided into 3 parts Himadri, Himachal and Shiwaliks.The 15 highest mountains in the world are in the Himalayas. The main ones are Mount Everest, K2, Annapurna, and Nanga Parbat. Mount Everest is the highest mountain on Earth, at 8,849 meters. Of the fifteen highest mountain peaks in the World, nine are in the Nepali Himalayas.
            </p>
          </div>
        </div>
          
        <button id="btn2"><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Waterfall</span></button>
    
        <div id="myModal2" class="modal">
          <div id="modal-content" class="modal-content2">
            <span id="close" class="close2">x</span>
            <img src="https://images.unsplash.com/photo-1493713838217-28e23b41b798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
            <p id="content">
              Waterfalls are commonly formed in the upper course of a river where lakes fall into in steep mountains. Because of their landscape position, many waterfalls occur over bedrock fed by little contributing area, so they may be ephemeral and flow only during rainstorms or significant snowmelt. The further downstream, the more perennial a waterfall can be. Waterfalls can have a wide range of widths and depths. When the river courses over resistant bedrock, erosion happens slowly and is dominated by impacts of water-borne sediment on the rock, while downstream the erosion occurs more rapidly.
            </p>
          </div>
        </div>
    
        <button id="btn3"><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Raigad</span></button>
    
        <div id="myModal3" class="modal">
          <div id="modal-content" class="modal-content3">
            <span id="close" class="close3">x</span>
            <img src="https://mapio.net/images-p/122383921.jpg" id="image">
            <p id="content">
              Raigad (Marathi:रायगड) is a hill fort situated in Mahad, Raigad district of Maharashtra, India. The Raigad Fort, formerly known as Rairi, was built by Chandraraoji More, the King of Jawali, who was then seized by Shivaji Maharaj who made it his capital in 1674 when he was crowned the King of the Maratha Kingdom which later developed into the Maratha Empire, eventually covering much of western and central India. The fort rises 820 metres (2,700 ft) above the sea level and is located in the Sahyadri mountain range. There are approximately 1737 steps leading to the fort. The Raigad Ropeway, an aerial tramway exists.
            </p>
          </div>
        </div>
    
        <button id="btn4"><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Lake</span></button>
    
        <div id="myModal4" class="modal">
          <div id="modal-content" class="modal-content4">
            <span id="close" class="close4">x</span>
            <img src="https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1144&q=80" id="image">
            <p id="content">
              A lake is an area filled with water, localized in a basin, surrounded by land, apart from any river or other outlet that serves to feed or drain the lake. Lakes lie on land and are not part of the ocean. Therefore, they are distinct from lagoons, and are also larger and deeper than ponds, though there are no official or scientific definitions. Lakes can be contrasted with rivers or streams, which are usually flowing. Most lakes are fed and drained by rivers and streams.Natural lakes are generally found in mountainous areas, rift zones, and areas with ongoing glaciation.
            </p>
          </div>
        </div>

null

Answer 1

你需要吗？在css中，我标记了我的编辑。

null

var modal_close = document.querySelector('.modal_back');

modal_close.addEventListener('click', function(event) {
  console.log('close');
});

// For button 1
var modal1 = document.getElementById("myModal1");
var btn1 = document.getElementById("btn1");
var span1 = document.getElementsByClassName("close1")[0];

 
btn1.onclick = function() {
  modal1.style.display = "block";
}

span1.onclick = function() {
  modal1.style.display = "none";
}

// For button 2
var modal2 = document.getElementById("myModal2");
var btn2 = document.getElementById("btn2");
var span2 = document.getElementsByClassName("close2")[0];

 
btn2.onclick = function() {
  modal2.style.display = "block";
}

span2.onclick = function() {
  modal2.style.display = "none";
}

// For button 3
var modal3 = document.getElementById("myModal3");
var btn3 = document.getElementById("btn3");
var span3 = document.getElementsByClassName("close3")[0];

 
btn3.onclick = function() {
  modal3.style.display = "block";
}

span3.onclick = function() {
  modal3.style.display = "none";
}

// For button 4
var modal4 = document.getElementById("myModal4");
var btn4 = document.getElementById("btn4");
var span4 = document.getElementsByClassName("close4")[0];

 
btn4.onclick = function() {
  modal4.style.display = "block";
}

span4.onclick = function() {
  modal4.style.display = "none";
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

button{
  width: 50%;
  height: 50%;
  float: left;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
}

button span {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: 'Roboto',sans-serif;
  font-size: 70px;
  color: transparent;
}

button img{
  width: 100%;
  height: 100%;
}

button:hover img{
  opacity: 0.4;
}

button:hover span{
  color: darkblue;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
  border: 2px solid black;
  border-radius: 5px;
}

#modal-content1, #modal-content2, 
#modal-content3, #modal-content4 {
  position: relative; /*add this it*/
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 40px 10px 5px 10px;
  border: 1px solid #888;
  /*width: 100%;
  height: 80%;*/
  width: 80%;
  height: 40%;
  margin: 0;
  border-radius: 15px;
}

#close {
  position: absolute; /*add this it*/
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
  top: 10px; /*add this it*/
  right: 10px; /*add this it*/
}

#close:hover,
#close:focus {
  background-color: darkgray;
}

p, img{
  display: flex;
}

img{
  float: left;
  width: 45%;
  padding: 0;
  margin: 0;
}

p{
  float: right;
  text-align: justify;
  width: 50%;
  padding: 0;
  margin: 0;
}

.modal_back {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: inherit;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nature</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button id="btn1"><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>

    <div id="myModal1" class="modal">
     <div class="modal_back">
      <div id="modal-content1" class="modal-content1">
        <span id="close" class="close1">x</span>
        <img src="https://images.unsplash.com/photo-1577516311194-eb14c570a137?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          The Himalayas are a mountain range in South Asia The Himalayas are a mountain range in South Asia.The west end is in Pakistan. They run through Jammu and Kashmir, Himachal Pradesh,Uttaranchal, Sikkim and Arunachal Pradesh states in India, Nepal, and Bhutan. The east end is in the south of Tibet. They are divided into 3 parts Himadri, Himachal and Shiwaliks.The 15 highest mountains in the world are in the Himalayas. The main ones are Mount Everest, K2, Annapurna, and Nanga Parbat. Mount Everest is the highest mountain on Earth, at 8,849 meters. Of the fifteen highest mountain peaks in the World, nine are in the Nepali Himalayas.
        </p>
      </div>
    </div>
  </div>
      
    <button id="btn2"><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Waterfall</span></button>

    <div id="myModal2" class="modal">
     <div class="modal_back">
      <div id="modal-content2" class="modal-content2">
        <span id="close" class="close2">x</span>
        <img src="https://images.unsplash.com/photo-1493713838217-28e23b41b798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          Waterfalls are commonly formed in the upper course of a river where lakes fall into in steep mountains. Because of their landscape position, many waterfalls occur over bedrock fed by little contributing area, so they may be ephemeral and flow only during rainstorms or significant snowmelt. The further downstream, the more perennial a waterfall can be. Waterfalls can have a wide range of widths and depths. When the river courses over resistant bedrock, erosion happens slowly and is dominated by impacts of water-borne sediment on the rock, while downstream the erosion occurs more rapidly.
        </p>
      </div>
    </div>
   </div>

    <button id="btn3"><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Raigad</span></button>

    <div id="myModal3" class="modal">
     <div class="modal_back">
      <div id="modal-content3" class="modal-content3">
        <span id="close" class="close3">x</span>
        <img src="https://mapio.net/images-p/122383921.jpg" id="image">
        <p id="content">
          Raigad (Marathi:रायगड) is a hill fort situated in Mahad, Raigad district of Maharashtra, India. The Raigad Fort, formerly known as Rairi, was built by Chandraraoji More, the King of Jawali, who was then seized by Shivaji Maharaj who made it his capital in 1674 when he was crowned the King of the Maratha Kingdom which later developed into the Maratha Empire, eventually covering much of western and central India. The fort rises 820 metres (2,700 ft) above the sea level and is located in the Sahyadri mountain range. There are approximately 1737 steps leading to the fort. The Raigad Ropeway, an aerial tramway exists.
        </p>
      </div>
    </div>
   </div>

    <button id="btn4"><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Lake</span></button>

    <div id="myModal4" class="modal">
     <div class="modal_back">
      <div id="modal-content4" class="modal-content4">
        <span id="close" class="close4">x</span>
        <img src="https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1144&q=80" id="image">
        <p id="content">
          A lake is an area filled with water, localized in a basin, surrounded by land, apart from any river or other outlet that serves to feed or drain the lake. Lakes lie on land and are not part of the ocean. Therefore, they are distinct from lagoons, and are also larger and deeper than ponds, though there are no official or scientific definitions. Lakes can be contrasted with rivers or streams, which are usually flowing. Most lakes are fed and drained by rivers and streams.Natural lakes are generally found in mountainous areas, rift zones, and areas with ongoing glaciation.
        </p>
      </div>
    </div>
   </div>
   
    <script src="script.js"></script>
  </body>
</html>