Question

我还有一个问题（第一个问题在这里：html, css with center div problem）

所以，我的网页上有三列，当我将图像放入其中一个并且我想缩小窗口（浏览器）时，图像在另一个div后面“前进”。这是相当不错的，但我希望这个div停止缩小，图像的重量会变成div的重量，或类似的东西。

抱歉，我不知道用英语解释，所以我会尝试图片：）

最大化： enter image description here

此时，它应该停止： enter image description here

不要这样做：
enter image description here

html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="styl.css">
    <title>Title goes here</title>
  </head>

  <body>
    <div id="cela">
      <div id="header">
      <p>hlavicka</p>
      </div>
      <div id="container3">   
        <div id="container2"> 
          <div id="container1"> 
                    <div id="lavy"><p><img src="http://akiscode.com/projects/SOS/chuck_norris_random_fact_generator_6_3957_2224_image_2561.jpg", width="150"/ > Etiam ante est, tempus vitae adipiscing ac, luctus ut massa. Vestibulum malesuada,</p><div class="clear"></div>
</div>
        <div id="stredny"><p>Mauris orci erat, </p></div>
        <div id="pravy"><p></p></div>
           </div>
        </div>
      </div>


      <div id="footer">
      <p>footer</p>
      </div>  
    </div>
  </body>

</html>

css part

img
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px; 
}
.clear {
clear:both;
width:100%;
} 
#cela {
width: 80%;
margin-left: auto;
margin-right: auto;
border: 1px #110000 solid;   
}
#header
{
padding:20px;
background:#008000;
}
#footer
{
clear: both;
padding:20px;
background:#008000;
}
#container3 {
    float:left;
    width:100%;
    background:#CCFFCC;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:#66FF66;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:#00FF00;
    position:relative;
    right:40%;
}
#container0 {
    float:left;
    width:100%;
    background:white;
    position:relative;
    right:0%;
    }
#lavy
{
    float:left;
    width:28%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#stredny
{
    float:left;
    width:38%;
    position:relative;
    left:74%;
}
#pravy
{
    float:left;
    width:28%;
    position:relative;
    left:76%;
}

我试图使用overflow：scroll，但结果不是很美观

Answer 1

您应该使用min-width property。

具体来说，试试：

#cela {
    width: 80%;
    min-width: 800px;
}

调整800px，直到您想要它为止。

html，css img停止收缩<div>：）</div>

1 个答案: