Блог

Главная - Вопросы по программированию - КОРОБКУ поставьте бок о бок

КОРОБКУ поставьте бок о бок

#html #css

#HTML #css

Вопрос:

Итак, проблема в том, что всякий раз, когда я делаю зеленый и оранжевый рядом, это не работает, даже если 1000, разделенное на 2, равно 500 (кстати, новое в html), я действительно мало знаю о позициях и размерах в html

Вот HTML всего этого

 h1{
        position:relative;
        color:#89CFF0;
        font-family:arial;
        width:1000px;
        margin:0 auto;
        text-align:center;  
    }
    .boxes{
        width:1000px;
        margin:0 auto;
        position:relative;
        text-align:center;
    }
    #box1{
        font-family:arial;
        border:1px solid red;
        position:relative;
        margin:0 auto;
        width:1000px;
        top:40px;
        background-color:red;
    }
    #box2{
        font-family:arial;
        border:1px solid blue;
        position:relative;
        margin:0 auto;
        width:1000px;
        height:150px;       
        top:40px;
        background-color:blue;
    }

    #box3{
        position:relative;
        font-family:arial;
        border:1px solid green;
        position:relative;
        margin:0 auto;
        width:500px;
        height:100px;
        top:40px;
        float:left;
        background-color:green;
    }

    #box4{
        font-family:arial;
        border:1px solid orange;
        margin:0 auto;
        position:relative;
        width:500px;
        height:100px;
        top:40px;
        float:left;
        background-color:orange;
    }

    #box5{
        font-family:arial;
        border:1px solid yellow;
        position:relative;
        margin:0 auto;
        width:1000px;
        top:140px;
        background-color:yellow;
    } 
 <h1> The Box </h1>
<div class="boxes">
  <div id="box1">
    <p>RED</p>
  </div>
  <div id="box2">
    <p>BLUE</p>
  </div>
  <div id="box3">
    <p>GREEN</p>
  </div>
  <div id="box4">
    <p>ORANGE</p>
  </div>
  <div id="box5">
    <p>YELLOW</p>
  </div>
</div>

Вывод:
ЭТО РИСУНОК

Я думаю, что проблема в px .box3 , и я уверен, что box5 это хорошо

Ответ №1:

Вы забываете размер границы, который нужно включить в расчет. У вас есть родительский div размером 1000 пикселей. вы делите divs на 50% как 500 пикселей. Теперь есть граница, которую вам не хватает для рассмотрения. таким образом, граница размером 1 пиксель приведет к 2px (слева справа) дополнительной ширины, т.е. 502px. поэтому вам нужно уменьшить ширину на 2px, т.е. 498px.

Смотрите рабочий фрагмент здесь.

 h1 {
  position: relative;
  color: #89CFF0;
  font-family: arial;
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.boxes {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

#box1 {
  font-family: arial;
  border: 1px solid red;
  position: relative;
  margin: 0 auto;
  width: 1000px;
  top: 40px;
  background-color: red;
}

#box2 {
  font-family: arial;
  border: 1px solid blue;
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 150px;
  top: 40px;
  background-color: blue;
}

#box3 {
  position: relative;
  font-family: arial;
  border: 1px solid green;
  position: relative;
  margin: 0 auto;
  width: 498px;
  height: 100px;
  top: 40px;
  float: left;
  background-color: green;
}

#box4 {
  font-family: arial;
  border: 1px solid orange;
  margin: 0 auto;
  position: relative;
  width: 498px;
  height: 100px;
  top: 40px;
  float: left;
  background-color: orange;
}

#box5 {
  font-family: arial;
  border: 1px solid yellow;
  position: relative;
  margin: 0 auto;
  width: 1000px;
  top: 140px;
  background-color: yellow;
} 
 <h1> The Box </h1>
<div class="boxes">
  <div id="box1">
    <p>RED</p>
  </div>
  <div id="box2">
    <p>BLUE</p>
  </div>
  <div id="box3">
    <p>GREEN</p>
  </div>
  <div id="box4">
    <p>ORANGE</p>
  </div>
  <div id="box5">
    <p>YELLOW</p>
  </div>
</div>

Ответ №2:

Добавьте зеленый и оранжевый цвета в один div

   <div id="box3">
      <div>
       <p>GREEN</p>
      <div>
      <div>
       <p>ORANGE</p>
      </div>
  </div>

Добавьте display:flex в основной div box3 , это приведет к side by side
проверьте приведенный ниже фрагмент для свойства flex

или вы можете использовать сетку начальной загрузки

 #boxes{
    display:flex;
 }


#box3{
      background-color:green;
      width:450px;
    }
 #box4{
        background-color:orange;
        width:450px;
    }
    

     
 <div id="boxes">
          <div id="box3">
           <p>GREEN</p>
          </div>
          <div id="box4">
           <p>ORANGE</p>
          </div>
 </div>

Ответ №3:

Вы можете использовать родительский контейнер flexbox и вложить в него зеленые и оранжевые поля в качестве дочерних элементов, чтобы создать строку, используя display: flex . Затем отрегулируйте top положение нижнего желтого поля или увеличьте его высоту, чтобы занять это пустое пространство.

В правой части оранжевого поля есть немного ненужного дополнительного пространства, и это исчезает, когда border из синего поля удаляется. Я вижу, как вы использовали border в каждом поле для замены отступов, поэтому я добавил немного padding , и все хорошо выровнялось.

 .row {
  display: flex;
}

h1{
  position:relative;
  color:#89CFF0;
  font-family:arial;
  width:1000px;
  margin:0 auto;
  text-align:center;  
}

.boxes{
  width:1000px;
  margin:0 auto;
  position:relative;
  text-align:center;
}

#box1{
  font-family:arial;
  /* border:1px solid red; */
  padding: .5rem 0;
  position:relative;
  margin:0 auto;
  width:1000px;
  top:40px;
  background-color:red;
}

#box2{
  font-family:arial;
  /* border:1px solid blue; */
  padding-top: .5rem;
  position:relative;
  margin:0 auto;
  width:1000px;
  height:150px;       
  top:40px;
  background-color:blue;
}

#box3{
  position:relative;
  font-family:arial;
  border:1px solid green;
  position:relative;
  margin:0 auto;
  width:500px;
  height:100px;
  top:40px;
  float:left;
  background-color:green;
}

#box4{
  font-family:arial;
  border:1px solid orange;
  margin:0 auto;
  position:relative;
  width:500px;
  height:100px;
  top:40px;
  float:left;
  background-color:orange;
}

#box5{
  font-family:arial;
  /* border:1px solid yellow; */
  padding: .5rem 0;
  position:relative;
  margin:0 auto;
  width:1000px;
  top:40px;
  background-color:yellow;
} 
 <h1> The Box </h1>
<div class="boxes">
<div id="box1">
<p>RED</p>
</div>
<div id="box2">
<p>BLUE</p>
</div>
<div class="row">
<div id="box3">
<p>GREEN</p>
</div>
<div id="box4">
<p>ORANGE</p>
</div>
</div>
<div id="box5">
<p>YELLOW</p>
</div>
</div>