Html 如何在调整浏览器大小时阻止元素移动？

当我调整浏览器大小时，我的div标记会自动调整大小。我添加了min width：我认为这会阻止它，但事实并非如此

html:

---

原因是您正在将最小宽度作为%应用，而不是在px中

使用%意味着当浏览器窗口缩小48%时，像素会越来越少。如果以像素为单位定义最小宽度，当达到您声明的最小像素数时，它将停止收缩。

Html:

<div id="wrapper">
<div id="ad">
    <div id="adleft"></div>
    <div id="adright"></div>
</div>

这对我很有用： Html:

---

%基于宽度将始终为父项的%。如果要定义特定的宽度或最小/最大宽度，则需要使用px或其他单位进行修复。最小宽度是您希望它们达到的最小值，但由于所有宽度都是相对的，因此当容器（例如浏览器窗口）更改时，它们将自行调整大小。而不是使用最小宽度的百分比，使用像素这是您希望做的吗？谢谢：我已经这样做了，但现在当我移动浏览器时，它们彼此重叠。我想做的是：当浏览器在任何情况下调整大小时，它都会保持在原来的位置。你想要的最小像素是多少？设置宽度：48%，然后设置最小宽度：100px，例如，发布你的解决方案作为答案

#wrapper{ 
  max-width: 50%;
  margin: 0 auto;
}

#adleft {
  height: 500px;
  min-width: 48%;
  background-color: red;
  float: left;
}
#adright {
  height: 500px;
  min-width: 48%;
  background-color: red;
  float: right;
}

<div id="wrapper">
<div id="ad">
    <div id="adleft"></div>
    <div id="adright"></div>
</div>

#ad
{
    Display: table;
    Margin-left: auto;
    Margin-right: auto;

}
#adleft 
{
    height: 500px;
    min-width: 48%;
    background-color: red;
    Margin-right:20px;
}
#adright
{
    height: 500px;
    min-width: 48%;
    background-color: red;
}

<div id="wrapper">
<div id="adleft"></div>
<div id="adright"></div>

#wrapper{ 
max-width: 960px;
min-width: 960px;
margin: 0 auto;
margin-top: 30px;
}

#adleft {
height: 500px;
width: 48%;
background-color: red;
float: left;
}
#adright {
height: 500px;
width: 48%;
background-color: red;
float: right;

}