Question

我试图将三个盒子均匀地分布在整行中。我尝试添加“ width：100％”并删除最后一个孩子中的填充，但这似乎不起作用。

最后，三个框应具有相同的宽度，该宽度分布在行的最大宽度上，从而可以根据屏幕尺寸进行调整。

.bottom_section {
  display: table;
  height: 100%;
}

.bottom_section ul {
  display: table-row;
  height: 100%;
}

.bottom_section ul li {
  width: 33.33%;
  height: 100%;
  display: table-cell;
  padding: 0 30px 20px 0;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}

<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>

提前感谢任何提示

编辑：在前几个答案之后，似乎实际上分布很好。问题是填充，因为除了最后一个子元素（0px）以外，所有元素的填充权都为30px。我在左侧和右侧添加了填充，而在“第一个孩子”上没有添加填充，但是中间框较小。仍在尝试，并期待优雅的解决方案。谢谢

Answer 1

由于您需要一维格式设置，因此建议您使用flexbox

.bottom_section {}

.bottom_section ul {
  display: flex;
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bottom_section ul li {
  width: 33.33%;
  padding: 0 30px 20px 0;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}

<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>

Answer 2

这似乎适用于在Chrome上，其bottom_section的宽度为100％。（只是添加了绿色边框，所以它显示了列）您正在使用哪个浏览器？

.bottom_section {
  display: table;
  height: 100%;
  width:100%;
}

.bottom_section ul {
  display: table-row;
  height: 100%;
}

.bottom_section ul li {
  width: 33.33%;
  height: 100%;
  display: table-cell;
  padding: 0 30px 20px 0;
  border:1px solid green;
}

.bottom_section ul li:last-child {
  padding-right: 0;
}

.bottom_section ul li div {
  padding: 25px 15px;
  height: 100%;
  background: right top no-repeat #FFF;
}

.bottom_section ul li div h3 {
  margin-bottom: 10px;
  padding-top: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #FF5C1B;
  text-align: center;
}

.bottom_section ul li:first-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:nth-child(2) div h3 {
  background: center top no-repeat;
}

.bottom_section ul li:last-child div h3 {
  background: center top no-repeat;
}

.bottom_section ul li div p {
  font-weight: 300;
  font-size: 14px;
  color: #6e6e6e;
  line-height: 24px;
}

<section class="bottom_section">
  <ul>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
    <li>
      <div style="text-align: center;">
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <h3>Some text</h3>
        <p>Some text</p>

      </div>
    </li>
  </ul>
</section>

css / html ul表格行元素水平分布

2 个答案: