0

ページ全体を小さな写真でカバーしようとしていますが、ページに左右の余白を残すことはできません。

私はそれを行うためにjsを使用していません.cssとhtmlだけです:

<div class="container-fluid" id="wrapper">
<div id="home-decore">

<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
etc ..



</div>
</div>

#wrapper{
  background:red;
    padding-top:5%;
min-height: 88%;
height: auto !important;
height: 88%;

}
#home-decore{
margin:0;
padding-top:60px;
left:0;
top:0;
position:realtive;
min-height: 100%;
height: auto !important;
height: 100%;
background:#000;


}
#home-decore img{
  border-radius:2px;
  border:0.3% solid white;
  opacity:0.6;
  width: 3.3333%; 
    overflow: hidden;
}
#home-decore img:hover{
opacity:1;
}

私が望むのは、すべてのページに収まるようにすることです right:0;top:0;bottom:0;left:0;

4

3 に答える 3

1

Bootstrap cssを使用せずにそれを達成できます

here's the Css code for it 
 <ul>
    <li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
  <img/>
   <li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
   <img/>
   </li>
  </li>
   ...........
 </ul>

Bootstrap が提供する Image Border については、次のリンクを参照してください。

http://css-tricks.com/using-css-for-image-borders/

于 2012-09-23T07:24:08.093 に答える
1

水平方向の画像の数を取得し、各画像の幅を (100 / numHorizo​​ntalImages)% として指定し、高さについても同じことを行います。横に 10 個、縦に 5 個の画像がある場合、次のようになります。

img { width: 10%; height: 20%;}

于 2012-09-23T07:09:37.417 に答える
1

必要なのは CSS リセットです。

http://www.cssreset.com/

または、CSS 内の body 要素への簡単な修正として、次のようなものを追加してみてください。

body{
    padding:0;
    margin:0;
}

何が起こるかというと、ブラウザはパディングとマージンのデフォルト値をいくつか定義しています。これがあなたが現在遭遇しているものだと思います。

(また、'#home-decore' にタイプミスがあることに気付きました。'realtive' は 'relative' である必要があります。これにより、予期しない結果が生じる可能性があります。)

于 2012-09-23T07:32:26.737 に答える