простая система позиционирования CSS. пытаясь выровнять их идеально и даже

0

Привет, ребята, я очень стараюсь сделать 3 коробки, выровненных идеально даже с каждым другим, но я не уверен, почему он продолжает двигаться неуместно

У меня есть класс.clear, но он все равно не станет ровным, а средний идет вниз

это мой html и мой css в порядке

      <div id="left3box">
        <p> hello i am left
      </div>
      <div id="middle3box">
        <p> hello i am middle
      </div>
      <div id="right3box">
        <p> hello i am right
      </div>
     <div class="clear"></div>    

и мой css

#thirdbox {
  border: solid 4px black;
  margin: 60px;
}

#left3box{
 width: 300px; border: 1px solid red; float: left; margin-right: 30px;
}

#middle3box{
 width: 300px; border: 1px solid red; margin: auto;

}

#right3box{
 width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
  • 0
    у меня есть c.class в моем css, а также забыл перечислить его
Теги:
web-applications

3 ответа

0

Добавьте маржу справа и маржу слева к среднему столбцу, настройте ее так, чтобы она точно совпала с тем, как вы ее хотите. Так что-то вроде

.rightColumn
{ 
border: 1px solid red;  
width: 300px; 
float: left;
}
.leftColumn
{
border: 1px solid red;
width: 300px;
float:left;
color:#7D26CD;  
}
.middleColumn
{
border: 1px solid red;
margin-right: 10px;
margin-left: 10px;
width: 300px; 
float: left;
}

другая причина, по которой он может выйти из-под места, - это то, что край справа у вас в правом и правом левом углу слишком широк, поэтому для всех не хватает места, поэтому просто поиграйте с этим.

0

Если вы хотите, чтобы 3 ящика распределяли равномерно, вам, вероятно, лучше удалять "float", заставить их "dispay: inline-block" установить родительский элемент в "text-align: center", а затем использовать "margin" на div, чтобы определить расстояние между ними

Код, который вы предоставили, может работать, в зависимости от ширины родительского контейнера

0

Используя margin и floats, средний квадрат должен появиться после левого и правого в разметке.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню