下面是我的代码，这里我把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，请帮忙。
您可以使用FlexBox布局，如下所示:
使用flex-grow:1； flex-basis:0；您可以添加任意多的子项，并且所有子项都具有相同的宽度。
null
.parent {
display: flex;
flex-direction: row;
height: 150px;
width: 500px;
background: #e6e6e6;
}
.child {
flex-grow: 1;
flex-basis: 0;
border: 1px solid #ccc;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent" style="margin-top: 20px;">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent" style="margin-top: 20px;">
<div class="child"></div>
<div class="child"></div>
</div>
给父div flex属性，它就很容易工作:
<div class="parent">
<div></div>
<div></div>
<div></div>
</div>
CSS
.parent{
display: flex;
justify-content: space-evenly;
}
我认为Bootstrap将使这项工作难以置信地容易为你。
1.只要在你的HTML中包含bootstrap，如果你不知道如何google它
2.使用类行创建div
3.在定义的div with class行中，使3个div元素具有class col-4。
就是这样。
