How to align 3 divs (left/center/right) inside another div?

前端 未结 18 2586
猫巷女王i
猫巷女王i 2020-11-21 20:48

I want to have 3 divs aligned inside a container div, something like this:

[[LEFT]       [CENTER]        [RIGHT]]

Container div is 100% wid

18条回答
  •  别那么骄傲
    2020-11-21 21:26

    I did another attempt to simplify this and achieve it without the necessity of a container.

    HTML

    .box1 {
      background-color: #ff0000;
      width: 200px;
      float: left;
    }
    
    .box2 {
      background-color: #00ff00;
      width: 200px;
      float: right;
    }
    
    .box3 {
      background-color: #0fffff;
      width: 200px;
      margin: 0 auto;
    }
    

    CSS

      .box1 {
      background-color: #ff0000;
      width: 200px;
      float: left;
    }
    
    .box2 {
      background-color: #00ff00;
      width: 200px;
      float: right;
    }
    
    .box3 {
      background-color: #0fffff;
      width: 200px;
      margin: 0 auto;
    }
    

    You can see it live at JSFiddle

提交回复
热议问题