html, css img 停止收缩 <div> :)

我还有一个问题(第一个在这里: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 部分

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，但结果不是很美观

最佳答案

你应该使用 min-width property .

具体来说，尝试:

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

调整 800px 直到达到您想要的效果。

关于html, css img 停止收缩 <div> :)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5292682/

html, css img 停止收缩 <div> :)

上一篇：html - IE 与表单 css 样式不兼容

下一篇：html - 居中所有div