Question

我有一些我无法解决的问题，如果有人会解释我的工作方式，我将不胜感激。首先，我有一个带有id＆＃34; kafle＆＃34;的容器，我根据需要定位它，现在我想在其中放置一些瓷砖。我想做类似这样的事情：我想要将容积为50％的容器与id＆＃34; kafle＆＃34;，并将其平铺为另一个50％的宽度。我将瓷砖1和2的边距和填充设置为0，但是尽管如此，还是有一些东西使得瓷砖2在瓷砖1下面，我不知道为什么。另一个问题是，我不知道如何将瓷砖3,4,5和6放在瓷砖1下面，但是在瓷砖2的一行中。当我设置显示时：内联块到所有瓷砖，瓷砖3,4,5和6正在瓷砖2的高度下面。我该如何处理它？我将很感激地解释它。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

好的，因为我讨厌自己，我决定在CSS Grid (CSS Tricks article)中构建这个布局，其中spotty compatibility和no consistency。

无论如何，使用这个最近添加到CSS的布局是可以实现的。诀窍当然是登陆一种对大多数浏览器都能保持一致的语法。以下是一个似乎适用于主要的一个。

html, body{
  height: 100%;
  min-height: 100%;
  margin:0;
}


#kafle{
  position:relative;
  height: 80%;
  width: 60%;
  top:10%;
  left:20%;
  background-color: aquamarine;

  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr 1fr;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  justify-items: stretch;
}

#onas{
  background-color: coral;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
}

#aktualnosci{
  background-color: firebrick;
  grid-column: 4 / 7;
  grid-row: 1 / 4;
  -ms-grid-column: 4;
  -ms-grid-column-span: 6;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
}

#galeria{
  background-color: forestgreen; 
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
}

#wspierajanas{
  background-color: khaki; 
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
}

#kontakt{
  background-color: fuchsia; 
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
}

#minigra{
  background-color: fuchsia; 
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
}

<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>

Answer 2

我刚刚为您提问Weave。
HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Tiles</title>
  </head>

  <body>
    <div class="tile1">
      <h1>Tile 1</h1>
    </div>

    <div class="tile2">
      <h1>Tile 2</h1>
    </div>

    <div class="tile3">
      <h1>Tile 3</h1>
    </div>

    <div class="bottomLeftTiles">
      <div class="tile4">
        <h1>Tile 4</h1>
      </div>

      <div class="tile5">
        <h1>Tile 5</h1>
      </div>

      <div class="tile6">
        <h1>Tile 6</h1>
      </div>
    </div>
  </body>
</html>

CSS：

div {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(0, 0, 0);
}

h1 {text-align: center;}

.tile1 {
  width: 50%; height: 33%;
  position: absolute;
  left: 0; top: 0;
}

.tile2 {
  width: 50%; height: 100%;
  position: absolute;
  right: 0; top: 0;
}

.tile3 {
  width: 49.6%; height: 33%;
  position: absolute;
  left: 0; top: 33%;
}

.bottomLeftTiles {
  width: 49.6%; height: 33%;
  position: absolute;
  left: 0; top: 66%;
}
.tile4 {
  width: 33%; height: 100%;
  position: relative;
  left: 0; top: 0;
}
.tile5 {
  width: 33%; height: 100%;
  position: absolute;
  left: 33%; top: 0;
}
.tile6 {
  width: 33%; height: 100%;
  position: absolute;
  left: 66%; top: 0;
}

您可能需要调整一些元素的大小，但我希望这会有所帮助。

Answer 3

看起来物体相对于彼此的位置让你很烦恼。

设置#id {display：inline：block;} 现在div的行为就像块一样。
使用#id {position：relative widthtomove px lengthtomove px;} 现在为每个盒子（或分区）相应地设置两个相对参数，并保持变化直到它们完全对齐。

你可以考虑详细使用职位：亲属，但上面应该做的工作！

解释边距和处理瓷砖

3 个答案: