ในโค้ดตัวอย่างของฉัน โปรดคลิกที่ปุ่มสร้างเนื้อหาเพื่อทำความเข้าใจปัญหา
เมื่อคุณคลิกที่ปุ่ม คุณจะเห็นรายการ Flex(.each-result
) ทั้งหมดที่สร้างขึ้น พวกมัน เกือบ ถูกล้อมด้วย div/flexbox (.result-container
) โดยสมบูรณ์ ซึ่งระบุด้วยเส้นขอบจุดสีน้ำเงิน ถ้าฉันลบระยะขอบออกจากรายการดิ้น มันจะพอดีกับ div อย่างสมบูรณ์ อย่างไรก็ตาม เมื่อฉันเพิ่มระยะขอบ div หลัก (เช่น flexbox) จะไม่ขยายจนเต็มความกว้าง ยังคงมีความกว้างเท่าเดิมเมื่อไม่มีขอบ
มีวิธีการเปลี่ยนแปลงนี้เพื่อให้ div ขยายเมื่อเพิ่มระยะขอบหรือไม่
const leftArrow = document.querySelector('#left-arrow');
const rightArrow = document.querySelector('#right-arrow');
const rootDiv = document.querySelector('#root');
const generateButton = document.querySelector("#button-generate");
var navMargin = '';
let rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`Window size onload: ${rootContainerWidth}`);
window.addEventListener('resize', () => {
rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`The new window size is ${rootContainerWidth}`);
})
//This code basically generates the content within the div
generateButton.addEventListener("click", () => {
for (let i = 0; i < 10; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("each-result");
newDiv.appendChild(addImg("https://uk.usembassy.gov/wp-content/uploads/sites/16/please_read_icon_150x150.jpg"));
rootDiv.appendChild(newDiv);
}
rootDiv.firstElementChild.classList.add('nav-margin');
navMargin = document.querySelector('.nav-margin');
});
//These enable the arrow to scroll through the dynamically generated content
// function navArrow () {
// leftArrow.addEventListener('click', () => {
// });
// rightArrow.addEventListener('click', () => {
// if ()
// });
// }
//Simple function to create and image element with the src attribute set in one line
function addImg(url) {
const newImg = document.createElement("img");
newImg.setAttribute("src", url);
return newImg;
}
html, body {
height: 100%;
}
button {
position: relative;
z-index: 1
width: auto;
height: 50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
top: 15%;
z-index: 0
}
.each-result {
height: 150px;
width: 150px;
border: 3px dotted red;
margin: 0 1%;
}
img {
height: 100%;
width: auto;
}
.nav-arrows {
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
position: absolute;
background: clear;
pointer-events: none;
}
#left-arrow, #right-arrow {
pointer-events: auto;
}
#root-container {
display: flex;
align-items: center;
border: 1px solid black;
height: 200px;
position: relative;
flex-flow: row no-wrap;
/* overflow: hidden; */
width: 100%;
}
.result-container {
display: flex;
border: 2px blue dotted;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
<div class="nav-arrows">
<button id="left-arrow"><i class="fas fa-arrow-alt-circle-left"></i>
</button>
<button id="right-arrow"> <i class="fas fa-arrow-alt-circle-right"></i>
</button>
</div>
<div id="root-container">
<div id="root" class="result-container">
</div>
</div>
</div>
<button id="button-generate">Generate Content</button>
margin: 0 1vw
- person Ason   schedule 25.02.2018margin: 0 1vw;
ไม่ได้ให้ผลลัพธ์ที่ต้องการ - person Brett DeWoody   schedule 25.02.20181vw
ระยะห่างไม่เท่ากัน - person Brett DeWoody   schedule 26.02.20181vw
ไม่ได้ให้ผลลัพธ์เหมือนกับ1%
- person Brett DeWoody   schedule 26.02.2018