Question

当我调整浏览器大小时，我的div标签会自行调整大小。我添加了最小宽度：我认为会阻止它，但它没有。

HTML：

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

的CSS：

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

Answer 1

原因是您将min-width作为%而不是px。

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

Answer 2

HTML：

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

将此内容包含在您的Css中：

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

Answer 3

这对我有用： HTML：

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

css：

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

}

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

3 个答案: