为什么我的盒子容器大小不一样而且不在屏幕中间

Question

Assigments example 嘿，我是编程新手，我使用简单的网格框架 css 进行了此分配，但不允许我使用 bootstrap 或 javascript。所以我尝试将大小更改为 30%，但我的容器没有放在中间，我将其更改为 100:3 = 33.33%、66.66%、100%，但我的盒子大小不一样

.table {
  border: 1px solid black;
  background-color: gray;
  width: 100%;
  height: 150px;
  margin right: auto;
  margin-left: auto;
  float: left;
  overflow: hidden;
}

.row {
  width: 100%;
}

@media (min-width: 1200px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3 {
    float: left;
    border: 1px purple;
  }
  .col-lg-1 {
    width: 33.33%;
  }
  .col-lg-2 {
    width: 66.66%;
  }
  .col-lg-3 {
    width: 100%;
  }
}

.food {
  text-align: center;
  width: 120px;
  background-color: blue;
  float: right;
}

.desc {
  padding: 10px;
  float: left;
}

<div class="row">

  <div class="col-lg-1 table">
    <div class="food" id="chicken">Chicken</div>
    <div class="desc"> Lorem ipsum dolor sit amet, consectur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitaion ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

  <div class="col-lg-2 table">
    <div class="food" id="beef">Beef</div>
    <div class="desc"> Lorem ipsum dolor sit amet, consectur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitaion ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

  <div class="col-lg-3 table">
    <div class="food" id="sushi">Sushi</div>
    <div class="desc"> Lorem ipsum dolor sit amet, consectur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitaion ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

Answer 1

首先如果你想让它们有相同的宽度，你应该将col1、col2和col3的宽度都设置为33.33%。

.col-lg-1 {
  width: 33.33%;
}

.col-lg-2 {
  width: 33.33%;
}

.col-lg-3 {
  width: 33.33%;
}

https://jsfiddle.net/ramseyfeng/3prz6awt/

顺便说一句，我建议你尝试使用 flex 来做布局，我只是为你的场景创建了一个简单的布局：

https://jsfiddle.net/ramseyfeng/8fps0wuv/

为什么我的盒子容器大小不一样而且不在屏幕中间

Why my box container does not have the same size and not in the middle of the screen

html

css

grid

css-float