Блог

Я пытаюсь выровнять три раздела по горизонтали. Центральный div врезается в левый div. Что я делаю не так?

     <div>
      <div style={{width:"100px", border:"solid blue", float:"left"}}>Left some text some text some text</div>
      <div style={{width:"100px",  border:"solid green", float:"right"}}>Right</div>
      <div style={{border:"solid red", margin:"0 auto"}}>Center</div>
      <div style={{clear:"both"}}></div>
    </div>
 

Центр также перекрывает правый зеленый прямоугольник, но размеры границ одинаковы, поэтому вы не можете его видеть.

Дайте красный div margin-left:100px :

 <div>
      <div style="width:100px;border:1px solid blue;float:left">Left some text some text some text</div>
      <div style="width:100px;border:1px solid green;float:right">Right</div>
      <div style="border:1px solid red;margin-left:100px">Center</div>
      <div style="clear:both"></div>
    </div> 

Может быть, вам следует использовать flexbox? я думаю, что это намного удобнее и современнее, чем "float" концепция. Это мое предложение.Я надеюсь, вы будете довольны 😉 Если вы хотите, вы можете переключиться с width на flex свойства, они прокомментированы в css.

 .wrapper {
  display: flex;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  text-align: center;
}

.blue {
  width: 100px;
/*   flex: 1; */
  border:1px solid blue;
}

.green {
  width: 100px;
/*   flex: 1; */
  border:1px solid green;
}

.red {
  width: 100%;
/*   flex: 8; */
  border:1px solid red;
  margin: 0 auto;
} 

 <div class="wrapper">
  <div class="blue">Left some text some text some text</div>
  <div class="red">Center</div>
  <div class="green">Right</div>
</div>