Блог

Я просмотрел кучу веб-сайтов, но ни один из них у меня не работал. Вероятно, я упускаю что-то действительно простое.

 #container {
  width:100%;
}

#one {
  background-color:blue;
  width:20%;
  height:50%;
}

#two {
  background-color:green;
  width:20%;
  height:50%;
}

#three {
  background-color:yellow;
  width:20%;
  height:50%;
}

#four {
  background-color:orange;
  width:20%;
  height:50%;
}

#five {
  background-color:red;
  width:20%;
  height:50%;
}
  

Вот как я хочу, чтобы это выглядело:

Он не отображает много, что, как я подозреваю, связано с высотой: 50%… Заранее спасибо 🙂

Вам просто нужно добавить значение с плавающей запятой слева к каждому идентификатору в вашем контейнере. Это усеченная версия, нет необходимости добавлять один и тот же css к каждому из ваших отдельных идентификаторов.

 #container #one, #container #two, #container #three, #container #four, #container #five {
 float:left;
}
  

или вы можете использовать встроенный блок отображения

 #container #one, #container #two, #container #three, #container #four, #container #five {
     display:inline-block;
    }
  

Чтобы выровнять divs по центру, если над ними осталось какое-либо пространство, вы можете добавить выравнивание текста по центру, чтобы обеспечить правильное центрирование divs в вашем контейнере. Это работает только при использовании встроенного блока отображения в вашем контейнере.

 #container {
         text-align:center;
        }
  

Чтобы поместить все div в одну строку, используйте

 display:inline-block;
  

если хотите отобразить divs в следующей строке,
использовать

 display:block;
  

по умолчанию установлено значение блокировать;

 #container {
width:100%;
  
}
#one,#two,#three,#four,#five{
width:20%;
height:50%;
}
#one {
background-color:blue;
display:inline-block;
}

#two {
background-color:green;
display:inline-block;
}
#three {
background-color:yellow;
  display:inline-block;
}
#four {
background-color:orange;
}
#five {
background-color:red;
}  

 <div id="container">
  <div id="one">
    One
   </div>
   <div id="two">
     Two
   </div>
   <div id="three">
     Three
   </div>
  <div id="four">
     four
   </div>
  <div id="five">
     five
   </div>
</div>  

Надеюсь, это поможет

Я немного изменил ваш код, но это должно вывести то, что вы ищете.

Вы отображаете divs в строке и располагаете их относительно друг друга с небольшим отрицательным запасом, чтобы они занимали 20% ширины каждый.

В комментарии вы упомянули, что хотите «сделать его ровно на 50% выше», поэтому вам нужно указать 100% высоту тела, а затем задать для divs значение 50% height:

 html,
body {
  height: 100%;
}
div {
  display: inline-block;
  width: 20%;
  height: 50%;
  position: relative;
  margin: -2px;
}
#one {
  background-color: lightblue;
}
#two {
  background-color: green;
}
#three {
  background-color: yellow;
}
#four {
  background-color: orange;
}
#five {
  background-color: red;
}  

 <div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">
</div>

<div id="five">

</div>  

я не уверен, что это то, о чем вы спрашиваете, но, возможно, вам просто нужно

 div{float:right;}
  

Попробуйте это:

 #container {
  width: 100%;
  height: 300px;
  border: 1px solid #000;
}
#container div {
  width: 20%;
  height: 50%;
  float: left;
}
#element-1 {
  background-color: red;
}
#element-2 {
  background-color: blue;
}
#element-3 {
  background-color: pink;
}
#element-4 {
  background-color: yellow;
}
#element-5 {
  background-color: green;
}  

 <div id="container">
  <div id="element-1"></div>
  <div id="element-2"></div>
  <div id="element-3"></div>
  <div id="element-4"></div>
  <div id="element-5"></div>
</div>  

Я в некотором роде помог