三个div并排，之间有间距 [英] Three divs side by side with spacing in between

问题描述

我正在尝试使三个div并排，中间的div之间有间距.

I'm trying to have three of divs side by side with spacing in between the div's in the middle.

这是我需要的图像:

这是我当前的代码:

<style>
  .box {
    float: left;
    width: 33%;
    background-color: red;
    text-align: center;
    color: #fff;
  }
</style>

<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>

当前代码的问题在于，它在div 1和2以及div 2和3的中间没有我需要的间距.

The problem with my current code is that it does not have the spacing I need in the middle of div 1 and 2, and div 2 and 3.

推荐答案

使用flexbox来实现所需的功能可能会更好.为三个.box div创建一个容器，并使用以下样式设置它:

You might be better using a flexbox to achieve what you need. Create a container for the three .box divs, and style it with the following:

display:flex;
justify-content:space-between;

请记住，需要减小.box div的宽度才能获得所需的空间，并且不需要float:left;.在CSS中.

Keep in mind that the width of your .box divs will need to be lowered to achieve the space you want and that you would not require the float:left; in the css.

有关Flexbox的详细信息，请单击此处: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For more info on flexboxes, click here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这篇关于三个div并排，之间有间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！