如何解决为什么即使我按百分比设置宽度,当浏览器缩小时div也会重叠?
我已将屏幕分为两个div
,宽度分别为40%和59%,但是每当我缩小浏览器时,第二个div就会与第一个div重叠。我要去哪里错了?
#watch-container{
width: 40%;
height: 100vh;
display: inline-block;
}
#watch-container .watch-skin{
height: 60%;
margin-left: 170px;
margin-top: 110px;
}
#desc-container{
width: 59%;
height: 100vh;
font-family: 'Montserrat',sans-serif;
display: inline-block;
vertical-align: top;
}
#content-wrapper{
width: 100%;
}
您可以运行下面的代码,或查看代码笔-https://codepen.io/tsiruot/pen/GRZMqZY
*{
margin:0;
padding:0;
box-sizing: border-box;
}
nav{
background-color: #233D53;
height: 60px;
}
nav #logo{
height: 40px;
margin-left: 45px;
margin-top: 10px;
}
#watch-container{
width: 40%;
height: 100vh;
display: inline-block;
}
#watch-container .watch-skin{
height: 60%;
margin-left: 170px;
margin-top: 110px;
}
#desc-container{
width: 59%;
height: 100vh;
font-family: 'Montserrat',sans-serif;
display: inline-block;
vertical-align: top;
}
#content-wrapper{
width: 100%;
}
#desc-container h1{
padding-top: 140px;
margin-bottom: 20px;
font-size: 40px;
font-weight: 1000;
}
#color-header{
font-size: 18px;
}
#desc-container p:nth-child(2){
padding-bottom: 10px;
width: 70%;
font-weight: 500;
}
#desc-container h3{
padding-bottom: 10px;
}
#color-container button{
height: 33px;
width: 45px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
border-radius: 4px;
border: none;
outline: none;
}
#color-container button:nth-child(1){
background-color:#23211f ;
}
#color-container button:nth-child(2){
background-color: #ca3d22;
}
#color-container button:nth-child(3){
background-color: #565681;
}
#color-container button:nth-child(4){
background-color: #8a5362;
}
#desc-container > button:last-child{
margin-top: 25px;
background-color: rgb(255,153,0);
width: 120px;
height: 40px;
outline: none;
border-radius: 5px;
border: 1px solid rgb(218,131,0);
cursor: pointer;
font-family: 'Montserrat',sans-serif;
color: black;
font-weight: 700;
}
#desc-container > button:nth-last-child(3)
{
width: 100px;
cursor: pointer;
height: 30px;
margin-left: 10px;
border-radius: 4px;
background-color: rgb(221,221,221);
outline: none;
border: none;
font-family: 'Montserrat',sans-serif;
font-weight: 700;
}
#desc-container > button:nth-last-child(4)
{
width: 60px;
height: 30px;
border-radius: 4px;
background-color: rgb(221,221);
cursor: pointer;
outline: none;
border: none;
font-family: 'Montserrat',sans-serif;
font-weight: 700;
}
<header>
<nav>
<img id="logo" src="amazon-img.png" alt="Amazon-logo" />
</nav>
</header>
<section>
<div id="content-wrapper">
<div id="watch-container">
<img class="watch-skin" src="https://i.imgur.com/iOeUBV7.png" alt="Black-strap" />
</div>
<div id="desc-container">
<h1>FitBit 20 - The Smartest Watch</h1>
<p>Lorem,ipsum dolor sit amet consectetur adipisicing elit.
Asperiores nisi quae dolorem eaque porro itaque architecto et dolores dolorum natus.</p>
<br />
<p id="color-header"><b>Select Color</b></p>
<div id="color-container">
<button class="color"></button>
<button class="color"></button>
<button class="color"></button>
<button class="color"></button>
</div>
<br />
<h3>Features</h3>
<button >Time</button>
<button >Heart Rate</button>
<br />
<button>BUY NOW</button>
</div>
</div>
</section>
解决方法
实际上,div不会重叠。 #watch-container .watch-skin
中的图像包含margin-left
中的170px
,这会导致图像移出其容器。删除该值,屏幕将按预期工作。
#watch-container .watch-skin{
height: 60%;
/* Remove this one */
/* margin-left: 170px; */
margin-top: 110px;
}
如果您有兴趣,可以在display: flex
中进行css
的实现。唯一需要更改的就是下面提到的内容。
#content-wrapper {
width: 100%;
display: flex;
}
#watch-container .watch-skin {
height: 60%;
margin-left: auto;
margin-top: 110px;
}
这将根据您的图像可用空间自动给出marin-left
。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background-color: #233D53;
height: 60px;
}
nav #logo {
height: 40px;
margin-left: 45px;
margin-top: 10px;
}
#watch-container {
width: 40%;
height: 100vh;
display: flex;
}
#watch-container .watch-skin {
height: 60%;
margin-left: auto;
margin-top: 110px;
}
#desc-container {
width: 59%;
height: 100vh;
font-family: 'Montserrat',sans-serif;
display: inline-block;
vertical-align: top;
}
#content-wrapper {
width: 100%;
display: flex;
}
#desc-container h1 {
padding-top: 140px;
margin-bottom: 20px;
font-size: 40px;
font-weight: 1000;
}
#color-header {
font-size: 18px;
}
#desc-container p:nth-child(2) {
padding-bottom: 10px;
width: 70%;
font-weight: 500;
}
#desc-container h3 {
padding-bottom: 10px;
}
#color-container button {
height: 33px;
width: 45px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
border-radius: 4px;
border: none;
outline: none;
}
#color-container button:nth-child(1) {
background-color: #23211f;
}
#color-container button:nth-child(2) {
background-color: #ca3d22;
}
#color-container button:nth-child(3) {
background-color: #565681;
}
#color-container button:nth-child(4) {
background-color: #8a5362;
}
#desc-container>button:last-child {
margin-top: 25px;
background-color: rgb(255,153,0);
width: 120px;
height: 40px;
outline: none;
border-radius: 5px;
border: 1px solid rgb(218,131,0);
cursor: pointer;
font-family: 'Montserrat',sans-serif;
color: black;
font-weight: 700;
}
#desc-container>button:nth-last-child(3) {
width: 100px;
cursor: pointer;
height: 30px;
margin-left: 10px;
border-radius: 4px;
background-color: rgb(221,221,221);
outline: none;
border: none;
font-family: 'Montserrat',sans-serif;
font-weight: 700;
}
#desc-container>button:nth-last-child(4) {
width: 60px;
height: 30px;
border-radius: 4px;
background-color: rgb(221,221);
cursor: pointer;
outline: none;
border: none;
font-family: 'Montserrat',sans-serif;
font-weight: 700;
}
<header>
<nav>
<img id="logo" src="amazon-img.png" alt="Amazon-logo" />
</nav>
</header>
<section>
<div id="content-wrapper">
<div id="watch-container">
<img class="watch-skin" src="https://i.imgur.com/iOeUBV7.png" alt="Black-strap" />
</div>
<div id="desc-container">
<h1>FitBit 20 - The Smartest Watch</h1>
<p>Lorem,ipsum dolor sit amet consectetur adipisicing elit.
Asperiores nisi quae dolorem eaque porro itaque architecto et dolores dolorum natus.</p>
<br />
<p id="color-header"><b>Select Color</b></p>
<div id="color-container">
<button class="color"></button>
<button class="color"></button>
<button class="color"></button>
<button class="color"></button>
</div>
<br />
<h3>Features</h3>
<button>Time</button>
<button>Heart Rate</button>
<br />
<button>BUY NOW</button>
</div>
</div>
</section>
,
您已将容器设置为百分比宽度,但是“ watch-container” div的内容没有响应,因此随着容器变小,它正在溢出其容器。
这是您正在使用的:
#watch-container .watch-skin{
height: 60%;
margin-left: 170px;
margin-top: 110px;
}
在图像的宽度和左边距之间,无论容器的大小如何,内容都超过500px。
您需要删除边距(如果需要,请使用margin:auto将图像居中)。您还需要根据 width 而不是 height :
使图像响应#watch-container .watch-skin{
width: 100%;
margin: auto;
margin-top: 110px;
}
工作示例:这是您的工作代码,其中包含#watch-container
的响应内容-请注意,当图像必须适合40%的屏幕时,图像将变得非常小。如果图像中的手表周围没有空白,将会很有帮助:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
nav{
background-color: #233D53;
height: 60px;
}
nav #logo{
height: 40px;
margin-left: 45px;
margin-top: 10px;
}
#watch-container{
width: 40%;
height: 100vh;
display: inline-block;
}
#watch-container .watch-skin{
width: 100%;
margin: auto;
margin-top: 110px;
}
#desc-container{
width: 59%;
height: 100vh;
font-family: 'Montserrat',sans-serif;
display: inline-block;
vertical-align: top;
}
#content-wrapper{
width: 100%;
}
#desc-container h1{
padding-top: 140px;
margin-bottom: 20px;
font-size: 40px;
font-weight: 1000;
}
#color-header{
font-size: 18px;
}
#desc-container p:nth-child(2){
padding-bottom: 10px;
width: 70%;
font-weight: 500;
}
#desc-container h3{
padding-bottom: 10px;
}
#color-container button{
height: 33px;
width: 45px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
border-radius: 4px;
border: none;
outline: none;
}
#color-container button:nth-child(1){
background-color:#23211f ;
}
#color-container button:nth-child(2){
background-color: #ca3d22;
}
#color-container button:nth-child(3){
background-color: #565681;
}
#color-container button:nth-child(4){
background-color: #8a5362;
}
#desc-container > button:last-child{
margin-top: 25px;
background-color: rgb(255,0);
width: 120px;
height: 40px;
outline: none;
border-radius: 5px;
border: 1px solid rgb(218,0);
cursor: pointer;
font-family: 'Montserrat',sans-serif;
color: black;
font-weight: 700;
}
#desc-container > button:nth-last-child(3)
{
width: 100px;
cursor: pointer;
height: 30px;
margin-left: 10px;
border-radius: 4px;
background-color: rgb(221,221);
outline: none;
border: none;
font-family: 'Montserrat',sans-serif;
font-weight: 700;
}
#desc-container > button:nth-last-child(4)
{
width: 60px;
height: 30px;
border-radius: 4px;
background-color: rgb(221,221);
cursor: pointer;
outline: none;
border: none;
font-family: 'Montserrat',sans-serif;
font-weight: 700;
}
<header>
<nav>
<img id="logo" src="amazon-img.png" alt="Amazon-logo" />
</nav>
</header>
<section>
<div id="content-wrapper">
<div id="watch-container">
<img class="watch-skin" src="https://i.imgur.com/iOeUBV7.png" alt="Black-strap" />
</div>
<div id="desc-container">
<h1>FitBit 20 - The Smartest Watch</h1>
<p>Lorem,ipsum dolor sit amet consectetur adipisicing elit.
Asperiores nisi quae dolorem eaque porro itaque architecto et dolores dolorum natus.</p>
<br />
<p id="color-header"><b>Select Color</b></p>
<div id="color-container">
<button class="color"></button>
<button class="color"></button>
<button class="color"></button>
<button class="color"></button>
</div>
<br />
<h3>Features</h3>
<button >Time</button>
<button >Heart Rate</button>
<br />
<button>BUY NOW</button>
</div>
</div>
</section>
,
我看到code.html结构很好,但是CSS属性存在一些问题。如果要将左图像放在左框的中央,则可以应用以下代码在所有屏幕上解决问题。
SCNTechnique
,
这不是一个很好的答案,但问题是他们height: 100vh;
将其删除了。改为使用
..... {
height:100%;
min-height:100vh;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。