0
を扱う誰かがそれがどのように動作するか私に説明しますならば、私は感謝するでしょう。最初に、私はid "kafle"のコンテナを持っていました。私が望むようにそれを配置しました。そして今、私はそれにいくつかのタイルを配置したいと思います。私はこのようなことをしたい：
私はタイル1にid "kafle"のコンテナの幅50％、タイルを50％幅にする。私は、タイル1と2のマージンとパディングを0に設定しましたが、これにもかかわらず、タイル2がタイル1の下に来るようなものがあります。もう1つの問題は、タイル1の下にタイル3、4、5、6をどのように置くことができるのか分かりませんが、タイル2の1つのラインにあります。 、4、5、6はタイル2の高さより低くなります。どうすれば対処できますか？私はそれを説明することに感謝します。私は修正することはできませんいくつかの問題を抱えているマージンを説明すると、タイル
html, body{
height: 100%;
min-height: 100%;
margin:0;
}
#kafle{
position:relative;
height: 80%;
width: 60%;
top:10%;
left:20%;
background-color: aquamarine;
}
#onas{
background-color: coral;
height:33%;
width:49%;
display: inline-block;
margin:0;
padding:0;
}
#aktualnosci{
background-color: firebrick;
height:90%;
width:49%;
display: inline-block;
margin:0;
padding:0;
}
#galeria{
background-color: forestgreen;
height:10%;
width:15%;
display: inline-block;
}
#wspierajanas{
background-color: khaki;
height:10%;
width:15%;
display: inline-block;
}
#kontakt{
background-color: fuchsia;
height:10%;
width:15%;
display: inline-block;
}
#minigra{
background-color: fuchsia;
height:10%;
width:15%;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="javascript.js"></script>
<div id="kafle">
<div id="onas">1</div>
<div id="aktualnosci">2</div>
<div id="galeria">3</div>
<div id="wspierajanas">4</div>
<div id="kontakt">5</div>
<div id="minigra">6</div>
</div>
</body>
</html>
CSSグリッドはこれには完璧ですが、*完全なサポートはIEのためのものではありません。そのようなスペースを見ている理由は、 ''インラインブロック ''のためです。それは空白を尊重するので、テキストブロック内の単語のように考えることができます。改行、タブ、スペースはスペースとしてレンダリングされます。 HTMLコメントを追加し、パーセンテージを50％に更新すると、間隔が表示されなくなります。https://jsfiddle.net/jmarikle/7s8yLq8x/私は代わりにflexboxをお勧めします。あなたのプロジェクトはそれを許可していますか？ –
Flexboxにはネストされたフレックスコンテナが必要です。レイアウトを単一のコンテナで達成することはできません。 –
@Paulie_D許可されていますが、CSSグリッドを使用することができない限り（理論的には、ハッキングされた定義はクロスブラウザで多くの痛みや悲惨さを伴います）、JavaScriptやラッパーなしで実現する方法はありません。 –