如果它在一個帶邊距的主 div 中，則制作一個寬度為 100vw 的 div
[英]If it's in a main div with margin, make a div with a width of 100vw
問題描述
我正在嘗試制作一個寬度為 100vw 的 div 以覆蓋所有查看區域，但是，它出現在一個帶有邊距的 div 中，所以我遇到了麻煩。
我還在下面包含了一個圖片鏈接，以幫助您理解。
* { margin: 0%; padding: 0%; } body { background: black; margin: 2rem 6rem; color: white; } /* About Section */.about { display: block; background-color: #2e3038; margin-left: -6rem; margin-right: 6rem; }
<body> <div class="about"> <div id="col1"> <h3>A co-founder at one of the world's largest communities. </h3> <p> The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities. </p> </div> <div id="col2"> <p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p> </div> </div> </body>
如您所見，我嘗試使用 margin-right，但是它不起作用。
我無法使用檢查元素，因為我試圖復制的設計是 png 格式。
1 個解決方案
解決方案1
1 已采納 2022-02-09 17:22:15
你很接近 - 你剛剛為margin-right指定了錯誤的方向：
* { margin: 0%; padding: 0%; } body { background: black; margin: 2rem 6rem; color: white; }.about { background-color: #2e3038; margin-left: -6rem; margin-right: -6rem; }
<body> <div class="about"> <div id="col1"> <h3>A co-founder at one of the world's largest communities. </h3> <p> The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities. </p> </div> <div id="col2"> <p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p> </div> </div> </body>
為什么 {{ width: “100vw”, height: “100vh”}} 比我的瀏覽器 window 大？（未應用邊距：0）
[英]Why is {{ width: “100vw”, height: “100vh”}} bigger than my browser window?(margin:0 not being applied)
刪除img寬度為100vw的水平滾動條的最佳解決方案？
[英]Best solution to remove horizontal scrollbar with img width of 100vw?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.