關於 alignment 的圖像和內容並排在 div 內

Question

我在 HTML 頁面中有四個部分，其中有 4 個按鈕。 單擊任何一個按鈕時，將顯示一個與該按鈕相對應的模式彈出窗口。 在該模態彈出窗口中，我希望右上方的關閉按鈕，並且圖像和內容應該並排正確對齊（所有邊的邊距相等）。 我希望每個模式彈出都顯示在中心。 我還希望，如果我在模式彈出窗口之外單擊，則模式彈出窗口應該關閉。 並且一次只應顯示一個模式彈出窗口，但如果我在外部單擊它會在前一個上方顯示另一個模式彈出窗口。 請幫助我，我完全不知道如何實現這一目標。

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

Answer 1

你需要嗎？ 在 css 中，我標記了我的編輯。

 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>