Изображения в HTML продолжают складываться по вертикали вне разделения - PullRequest
Новая
       94

Изображения в HTML продолжают складываться по вертикали вне разделения

0 голосов
/ 29 мая 2020

Я пытаюсь создать фоновое изображение, которое масштабируется с размером деления. Изображения, которые я использую, должны быть размещены в сетке 3x3, при этом углы должны оставаться фиксированными по размеру, а другие части расширяться, чтобы соответствовать разделению.

Однако, когда я пытаюсь разместить изображения, они все продолжают складываться по вертикали, а не относительно деления, в котором они находятся.

Углы тестовой таблицы должны быть синими, края - красными, а середина - оранжевой. 

body {
  background-color:black
}
#test > #Background_UL {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
}
   
#test > #Background_ML {
  background-color: red;
  background-size: 100% 100%;
  height: calc(100% - 80px);
  width: 40px;
  position: relative;
}
    
#test > #Background_LL {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
}
   
#test > #Background_UM {
  background-color: red;
  background-size: 100% 100%;
  height: 40px;
  width: calc(100% - 80px);
  top: 0;
  position: relative;
  left: 40px;
}
    
#test > #Background_MM {
  background-color: orange;
  background-size: 100% 100%;
  height: calc(100% - 80px);
  width: calc(100% - 80px);
  top: 40px;
  position: relative;
  left: 40px;
}
    
#test > #Background_LM {
  background-color: red;
  background-size: 100% 100%;
  height: 40px;
  width: calc(100% - 80px);
  bottom: 0;
  position: relative;
  left: 40px;
}
    
#test > #Background_UR {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
  right: 40px;
}
    
#test > #Background_MR {
  background-color: red;
  background-size: 100% 100%;
  height: calc(100% - 80px);
  width: 40px;
  position: relative;
  right: 40px;
}
    
#test > #Background_LR {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
  right: 40px;
}
<div id="test" style="width:400px;height:400px;">
  <div id="Background_UL"></div>
  <div id="Background_ML"></div>
  <div id="Background_LL"></div>
  <div id="Background_UM"></div>
  <div id="Background_MM"></div>
  <div id="Background_LM"></div>
  <div id="Background_UR"></div>
  <div id="Background_MR"></div>
  <div id="Background_LR"></div>
</div>

Пример

1 Ответ

0 голосов
/ 30 мая 2020

Вы можете легко достичь этого с помощью display: grid; на контейнере и указать grid-template-columns и grid-template-columns, и потребуется гораздо меньше кода. Вам также необходимо реорганизовать свои div на go слева направо, а затем транслировать вниз. Важный код, который я добавил: 

#test {
  display: grid;
  grid-template-columns: 40px auto 40px;
  grid-template-rows: 40px auto 40px;
}

Пожалуйста, посмотрите этот пример, который я сделал для вас: 

body {
  background-color:black
}
#test > #Background_UL {
  background-color: powderblue;
}
   
#test > #Background_ML {
  background-color: red;
}
    
#test > #Background_LL {
  background-color: powderblue;
}
   
#test > #Background_UM {
  background-color: red;
}
    
#test > #Background_MM {
  background-color: orange;
}
    
#test > #Background_LM {
  background-color: red;
}
    
#test > #Background_UR {
  background-color: powderblue;

}
    
#test > #Background_MR {
  background-color: red;

}
    
#test > #Background_LR {
  background-color: powderblue;
}

#test {
  display: grid;
  grid-template-columns: 40px auto 40px;
  grid-template-rows: 40px auto 40px;
}
<div id="test" style="width:400px;height:400px;">
  <div id="Background_UL"></div>
  <div id="Background_UM"></div>
  <div id="Background_UR"></div>
  <div id="Background_ML"></div>
  <div id="Background_MM"></div>
  <div id="Background_MR"></div>
  <div id="Background_LL"></div>
  <div id="Background_LM"></div>
  <div id="Background_LR"></div>
</div>
...