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を追加しました。最小化とは、ページを小さくすることを意味します。すべてが押しつぶされ、写真が重なり合って、恐ろしいものに見えます。最大化すればOKです。

4

4 に答える 4

0

あなたの問題は、ビューでタグが応答しないことです。最も簡単な方法は、ブートストラップ css をダウンロードして、html にリンクすることです。

 <!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を参照してください。

ブートストラップを使用したくない場合は、2 番目の選択肢として purecss があります http://purecss.io/

于 2013-08-25T15:46:07.513 に答える
0

を参照しfiddleて更新してください。

小さなエラーを更新しました。終了 div が 1 つありません。

そして、見出しに厳密なDTDがあることは、フォーマットを台無しにする主な理由です..

まだ学習中の場合は、トランジショナル/ルーズ DTD を使用できます。

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

これでうまくいくと確信していますが、それでも問題が解決しない場合は、フィドルを更新し、新しいリンクをすべてのコードとともに投稿してください。

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 に答える