0

私は、Excel シートの画像をまとめなければならないプロジェクトに取り組んでいます。最後の 2 つの画像が並んでいる、すべての画像から一意のテーブルのように見えるはずです。私は何かを書こうとしましたが、画像の間のスペースと最後の 2 つの画像の間の余白が今頭を悩ませています。あなたの助けは非常に高く評価されます。

  //***CSS file

  .crop img 
   {
    height: 791px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 850px;
    display: block;
   }
  .LeftTable 
   {
     float: left;
   }

  .RightTable 
  {
    float: right;
    width: 400px;  //when increasing over 400px, the image on right gets closer but goes underneath of the one on left side.
  }


  //**HTML file
   <div class="crop">
      <img src="QATables/image1.png">
      <img src="QATables/image2.png">
      <img src="QATables/image3.png">
      <img src="QATables/image4.png">
      <div class="LeftTable">
         <img src="QATables/image5.png">
      </div>
      <div class="RightTable">
         <img src="QATables/image6.png">
      </div>
  </div>
4

4 に答える 4

1

MathSquared11235 の回答に追加したいと思います。マージンとパディングをリセットすると常に役立ちます。もう一度言います...マージンとパディングをリセットするのに常に役立ちます。ブラウザごとにデフォルトの余白とパディングが異なります。これらをリセットしないと、すべてのブラウザで Web サイトを同じように見せることはできません。また、これは、使用しているブラウザーが不要なマージンやパディングを「追加」する可能性があるため、現在直面している問題でもある可能性があります。また、提案された「div」などの特定の要素でそれらをリセットしないでください。これをcssの一番上に配置することをお勧めします...

// * {マージン:0; パディング:0; }

アスタリスク (*) は単に「すべて」を意味します。したがって、自分で追加するまで、すべてのマージンは 0 で、パディングは 0 になります。はい、必要なマージンとパディングをすべての要素に追加する必要があります...しかし、ブラウザが個別に決定できるようにするのではなく、それは良いことです.

これが役立つことを願っています。

于 2013-01-16T03:04:52.440 に答える
0

左の画像の横に置くスペースがないので、設定する必要があります.crop{ width: 1700px; }。.right{ float: left; }

jsfiddle： http: //jsfiddle.net/2usCh/

于 2013-01-16T02:31:15.743 に答える
0

あなたが何をしているのか完全に理解しているかどうかはわかりませんが、できる限り質問に答えました。誤解している場合は、明確にしてください。もう一度やり直します。

最後の画像が最後から 2 番目の画像と完全に一致することを確認したいだけだと仮定すると、フロートを右から左に変更するだけで済みます。

// 関連コード:

 .LeftTable 
   {
     float: left;
   }

  .RightTable 
  {
    float: left;
    width: 400px;
  }
于 2013-01-16T02:28:05.707 に答える
-1

Internet Explorer を使用している場合は、非常に問題があることに注意してください。つまり、非常にグリッチです。残念ながら、現在見つけることができない別のSO投稿を読みました.グリッチの原因はHTMLの改行である可能性があり、IEはテキストに挿入したいタイポグラフィスペースであると非常に役に立ちます.

また、あなたはするかもしれません

div {margin: 0; padding: 0;}

レイアウトが許せば。画像の周りのスペースが削除されます。

お役に立てれば！

于 2013-01-16T02:22:11.603 に答える