Html 如何在同一行中等距放置3个div，并在浏览器中等距放置_Html_Css

Html 如何在同一行中等距放置3个div，并在浏览器中等距放置

html css

Html 如何在同一行中等距放置3个div，并在浏览器中等距放置,html,css,Html,Css,下面是我的代码，这里我把3个div的一个放在另一个旁边，但是我注意到最后一个div的右侧还有一些空间。如何删除它？在响应模式下，它也应该是等距的。我想实现这一点，而不使用引导或css网格请帮助 ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, init

下面是我的代码，这里我把3个div的一个放在另一个旁边，但是我注意到最后一个div的右侧还有一些空间。如何删除它？在响应模式下，它也应该是等距的。我想实现这一点，而不使用引导或css网格请帮助

`
<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Layout</title>
    <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>

    <div class="row">
        <h1>Our Menu</h1>
      <div class="col-lg-3 col-md-6">
        <p class="chicken">Chicken</p>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris ut erat iaculis ultricies sit amet sit amet orci. Vestibulum turpis ex, lobortis sed metus quis, egestas vestibulum lectus. Sed nec nulla felis</div></div>
      <div class="col-lg-3 col-md-6">
        <p class="beef">Beef</p>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris ut erat iaculis ultricies sit amet sit amet orci. Vestibulum turpis ex, lobortis sed metus quis, egestas vestibulum lectus. Sed nec nulla felis</div></div>
      <div class="col-lg-3 col-md-12">
        <p class="sushi">Sushi</p>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris ut erat iaculis ultricies sit amet sit amet orci. Vestibulum turpis ex, lobortis sed metus quis, egestas vestibulum lectus. Sed nec nulla felis</div></div>
    </div>
    </body>
    </html>`

这是我的css，请帮助。

您可以使用

flexbox

布局，如下所示：

`
<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Layout</title>
    <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>

    <div class="row">
        <h1>Our Menu</h1>
      <div class="col-lg-3 col-md-6">
        <p class="chicken">Chicken</p>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris ut erat iaculis ultricies sit amet sit amet orci. Vestibulum turpis ex, lobortis sed metus quis, egestas vestibulum lectus. Sed nec nulla felis</div></div>
      <div class="col-lg-3 col-md-6">
        <p class="beef">Beef</p>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris ut erat iaculis ultricies sit amet sit amet orci. Vestibulum turpis ex, lobortis sed metus quis, egestas vestibulum lectus. Sed nec nulla felis</div></div>
      <div class="col-lg-3 col-md-12">
        <p class="sushi">Sushi</p>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris ut erat iaculis ultricies sit amet sit amet orci. Vestibulum turpis ex, lobortis sed metus quis, egestas vestibulum lectus. Sed nec nulla felis</div></div>
    </div>
    </body>
    </html>`

随着

flex的增长：1；弹性基准：0您可以添加任意数量的子项，并且它们都具有相同的宽度

.parent{
显示器：flex；
弯曲方向：行；
高度：150像素；
宽度：500px；
背景：#e6；
}
.孩子{
柔性生长：1；
弹性基准：0；
边框：1px实心#ccc；
}
提供父div flex属性，它工作起来很简单：
<div class="parent">
<div></div>
<div></div>
<div></div>
</div>

我认为Bootstrap将使这项工作对您来说非常简单
1。如果你不知道如何用谷歌搜索，只需在你的HTML中加入引导程序即可
2。与班级行进行div
3。在已定义的带类别行的div中，使用类别col-4生成3个div元素。
就是这样。
你能告诉我，如果我能用这段代码而不是flexbox实现同样的效果，只要在我的代码中做一些调整，你就可以改变宽度：31%col-lg-3
towidth的code>property:33.3%
我试过了，但我希望它们之间的空格不能达到这一点。您可以尝试给它们填充，并将内容移动到内部div。您可以阅读网格系统上的引导文档以了解更多信息。
.parent{
display: flex;
justify-content: space-evenly;
}