0 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta name="generator" content="HTML-Kit Tools HTML Tidy plugin">
    <link href="layout.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
    <div class="square" font=10px>
        <p></p>
    </div>

    <div id="wrapper">
        <img class="A" src="download.jpg" alt="Solar Panels"/>
        <img class="B" src= "wind.jpg" alt="Windmills"  />
        <img class="C" src= "biomass.jpg" alt="Biomass"  />
        <img class="D" src= "renewable.jpg" alt="Renewable Energy"  />
    </div>  

    <hr>

    <div id = "bottom">
        <p>Contact:*********@gmail.com</p>
    </div>
</body>
</html>

这是我的CSS

<style type="text/css">
p {
color:#f5f5dc;
font-size:50px;
text-align: center;
margin-top: 20px; 
}
body{
background-color:#fffacd;
font-size:100%;
min-width:800px;
}
.square{
    height: 100px;
    width: 100%;
    position:relative;
    left:-20px;
    border: 2px solid black;
    border-radius: 5px;
    background-color:#0066cc;
    font-size:1.0em;

}
#wrapper{
width:100%;
margin-top: 40px;
margin-bottom: 40px;
}
.A, .B, .C, .D{
width:300px;
height:200px;
float:left;
border:1px solid black;
margin-right:10px;
margin-bottom:40px; 
}
.D{
width:270px;
}
#bottom p{
 color:black;
 font-size:15px;
}
</style>

这是我的代码，如何在不挤在一起的情况下将其最小化？我试过制作容器。我已经尝试了一切。

我添加了我的CSS。当我说最小化时，我的意思是当你缩小页面时。一切都被挤在一起，照片相互重叠，看起来很可怕。当你最大化它时很好。

4

4 回答 4

0

请参考fiddle并更新它，

我更新了小错误，缺少一个关闭 div，

并且标题中有严格的DTD，是破坏格式的主要原因..

如果仍在学习，您可以使用过渡/松散的 DTD，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

我相信这会做到，但如果问题仍然存在，请更新 fiddle 并用所有代码发回新链接。

感谢您更新 CSS 代码，现在在查看您的 CSS 后，我可以说问题是浮动的，我已经更新fiddel了相同的问题，适用于 Google Chrome 浏览器，如果有任何问题仍然存在，请告诉我，有规范.

于 2013-08-22T04:53:13.213 回答
0

您可以使用引导程序中的响应式 CSS，并且可以在格式化时使用其类。 http://getbootstrap.com/2.3.2/

例如。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
于 2013-08-22T04:19:24.447 回答
0

一个疯狂的猜测，为身体设置一个最小宽度。

排队

<body style="min-width: 800px;">

或在您的样式表中

body {
    min-width: 800px;
}

将 更改800px为所需的最小宽度。然后，当浏览器将宽度调整为小于该数字的宽度时，将出现滚动条。

于 2013-08-22T06:55:07.120 回答
0

您的问题是您的标签在您的视图中没有响应。最简单的方法是在您的 html 中下载 bootstrap css 和链接。

 <!DOCTYPE html>
 <html>
   <head>
     <style> 
        <link rel="stylesheet" type="text/css" href="bootstrap.css"> 
        <link rel="stylesheet" type="text/css" href="bootstrap_responsive.css"> 
    </style>
   </head>
   <body>
    <p>hello world.</p>
   </body>
 </html>

并检查

http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem了解更多详情。

如果您不想使用引导程序，则可以选择 purecss http://purecss.io/

于 2013-08-25T15:46:07.513 回答