为什么当浏览器缩小时 div 会重叠，即使我以百分比设置宽度？

Question

我 div 将屏幕分成两个 div 宽度分别为 40% 和 59%，但每当我缩小浏览器时，第二个 div 会与第一个 [=25] 重叠=].我哪里错了？

#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%;
}

你可以运行下面的代码，或者看看codepen - 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, 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>

Answer 1

实际上 div 并没有重叠。 #watch-container .watch-skin 中的图像包含 170px 的 margin-left 这会导致图像移出其容器删除该值，您的屏幕将按预期工作。

#watch-container .watch-skin{
    height: 60%;
    /* Remove this one */
    /* margin-left: 170px; */
    margin-top: 110px;
}

如果您有兴趣，可以在 css 中进行 display: flex 实施。只有你需要改变的是下面提到的那个。

#content-wrapper {
  width: 100%;
  display: flex;
}

#watch-container .watch-skin {
  height: 60%;
  margin-left: auto;
  margin-top: 110px;
}

这将根据您可用的 space 图片自动 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, 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>

Answer 2

您已将容器设置为百分比宽度，但 '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% 时，它会变得非常小的屏幕。如果您没有图中手表周围的白色 space，这将有所帮助：

*{
    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, 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, 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>

Answer 3

我看到 code.html 结构很好，但 CSS 属性有些问题。如果你想要左图在左框的中心，你可以应用下面的代码来解决你在所有屏幕上的问题。

#watch-container .watch-skin{
    height: 60%;
    margin-left: auto;
    margin-right:auto;
    display:block;
    margin-top: 110px;
}

Answer 4

不是一个花哨的答案，但问题 is/are 他们 height: 100vh; 删除了他们。而是使用

..... {
  height:100%;
  min-height:100vh;
}

为什么当浏览器缩小时 div 会重叠，即使我以百分比设置宽度？

Why divs are overlapping when browser is shrinked even when i set widths in percentage?

html

css

responsive