当我最小化HTML/CSS页面时，它将压缩所有图片和文本并破坏格式 [英] When I minimize my HTML/CSS page it squishes all the pictures and texts and ruins the formatting
本文介绍了当我最小化HTML/CSS页面时，它将压缩所有图片和文本并破坏格式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!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>
这是我的代码，如何在不挤在一起的情况下将其最小化? 我试过制作容器. 我已经尝试了一切.
This is my code how can i minimize it without it squishing together? i have tried making containers. I have tried everything.
我添加了CSS.当我说最小化时，我的意思是当您缩小页面时.一切都挤在一起，图片彼此叠放，看起来很恐怖.当您最大化它时就可以了.
I added my css. When I say minimize, I mean when you make the page smaller. Everything gets squished together and the pictures go on top of each other and it looks horrible. It's fine when you maximize it.
推荐答案
您可以使用引导程序中的自适应CSS，并且可以在格式化时使用其类. http://getbootstrap.com/2.3.2/
You can use responsive CSS from bootstrap and can use its class when formatting. http://getbootstrap.com/2.3.2/
例如.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
这篇关于当我最小化HTML/CSS页面时，它将压缩所有图片和文本并破坏格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
