當我儘量減少我的HTML/CSS網頁它squishes所有的圖片和文字，並破壞了格式化

<!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當我儘量減少我的HTML/CSS網頁它squishes所有的圖片和文字，並破壞了格式化

<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。當我說最小化時，我的意思是當你縮小頁面時。一切都在一起擠壓，圖片互相疊加，看起來很可怕。當你最大化它時很好。

來源

2013-08-22 anu

你能否提供一些更多的信息purecss。什麼是'最小化'CSS和HTML。縮小？ –

請提供您的css代碼 – MarmiK

您可以使用bootstrap提供的響應式CSS，並且可以在格式化時使用它的類。 http://getbootstrap.com/2.3.2/

例如。

<div class="row-fluid"> 
    <div class="span4">...</div> 
    <div class="span8">...</div> 
</div>

來源

2013-08-22 04:19:24

我不明白這是幹什麼的。我仍然是初學者。 – anu

嗨chillara，其稱爲響應。您可以最大化您的瀏覽器到任何設備視圖看看這個更詳細 –

請參考fiddle和更新，

我已經更新了小失誤，以一個閉合的div失蹤，

，並與在標題中嚴格的DTD，是毀滅的主要原因格式化..

您可以使用過渡/鬆散DTD如果還在學習，

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

我相信這樣做，但如果問題仍然存在，請更新小提琴並將所有代碼發回新鏈接。

感謝您更新CSS代碼，現在看到您的CSS後，我可以說這個問題是浮動的，我已經更新了我的fiddel相同的，這適用於谷歌Chrome瀏覽器，請讓我知道問題依然存在，具有規範性。

來源

2013-08-22 04:53:13 MarmiK

我改變了我的代碼（不在這裏）的文檔類型，但它仍然沒有做任何事情。謝謝。 – anu

我已經更新了我的答案，請檢查。 – MarmiK

瘋狂的猜測，設置一個最小寬度的身體。

INLINE

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

或在您的樣式表

body { 
    min-width: 800px; 
}

更改800px到你想要的所需的最小寬度。然後，當瀏覽器調整到小於該數字的寬度時，將出現滾動條。

來源

2013-08-22 06:55:07 LinkinTED

這沒有奏效。不過謝謝。 – anu

你的問題是你的標籤沒有響應你的意見。最簡單的方法是在你的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爲進一步瞭解詳情。

如果你不想使用引導則第二次選擇 http://purecss.io/

來源

2013-08-25 15:46:07

當我儘量減少我的HTML/CSS網頁它squishes所有的圖片和文字，並破壞了格式化

回答

相關問題