时间戳

首页 > 解决方案 > 如何在一行中将 3 个 div 等间距与浏览器的等间距

html - 如何在一行中将 3 个 div 等间距与浏览器的等间距

问题描述

下面是我的代码，这里我将 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>`

`

/********** Base styles **********/
* {
  box-sizing: border-box;

}
body{
     font-family: Comic Sans MS, Comic Sans, cursive;
     margin:0;
}
h1 {
  margin-bottom: 15px;
  text-align:center;
}
section{float:left;margin-right:10px;}

p {
background-color: #A52A2A;
width: 31%;
color: white;
position: relative;
top: -16px;
text-align: center;
float: right;
padding: 5px;
border-top: 0px;
border-bottom: 2px solid black;
border-left: 2px solid black;
border-right: 0px;
}

.desc{
    clear: both;
text-align: left;
top: -16px;
position: relative;
width: 94%;
padding-left: 20px;
height: 108px;
}

/* Simple Responsive Framework. */
.row {
  width: 100%;
}
.col-lg-3{background-color:#959da5; }
.chicken{background-color:#cea0a5;color:black; }
.beef{background-color:#cb2431;}
.sushi{background-color:#ffea7f;color:black; }
/********** Large devices only **********/
@media (min-width: 992px) {

  .col-lg-3 {
    width: 31%;
    margin:11px;
    float: left;
    border: 2px solid black;

  }

  .col-lg-12 {
    width: 100%;
  }
}

/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {

  .col-md-6 {
   width: 46%;
margin: 15px;
float: left;
    border: 2px solid black;
  }

  .col-md-12 {
    width: 96%;
margin: 15px;
  }
  .desc{height: auto;}
}`

这是我的css，请帮忙。

标签： htmlcss

解决方案

给父 div flex 属性，它很容易工作：

<div class="parent">
<div></div>
<div></div>
<div></div>
</div>

CSS

.parent{
display: flex;
justify-content: space-evenly;
}

推荐阅读