Привет, ребята, я очень стараюсь сделать 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;
}
Добавьте маржу справа и маржу слева к среднему столбцу, настройте ее так, чтобы она точно совпала с тем, как вы ее хотите. Так что-то вроде
.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;
}
другая причина, по которой он может выйти из-под места, - это то, что край справа у вас в правом и правом левом углу слишком широк, поэтому для всех не хватает места, поэтому просто поиграйте с этим.
Если вы хотите, чтобы 3 ящика распределяли равномерно, вам, вероятно, лучше удалять "float", заставить их "dispay: inline-block" установить родительский элемент в "text-align: center", а затем использовать "margin" на div, чтобы определить расстояние между ними
Код, который вы предоставили, может работать, в зависимости от ширины родительского контейнера
Используя margin и floats, средний квадрат должен появиться после левого и правого в разметке.