調整瀏覽器大小時如何阻止元素移動？

Question

當我調整瀏覽器大小時，我的div標簽會自行調整大小。 我添加了min-width：我以為它可以停止它，但是不會。

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

}