英文:
How to keep 3 responsive divs evenly spaced without flex?
问题
第三个 <div> 或列在在三列之间添加间距时会换行。我无法在不破坏布局的情况下添加间距。
我尝试过添加间距，box-sizing: border-box，以及使用百分比作为值，但没有成功。
这是我得到的结果：
大屏幕：
中等屏幕：
这是我期望的结果：
大屏幕：
中等屏幕：
/* 用于响应式布局 */
.container{
padding-left: 20px;
padding-right: 20px;
}
.row{
width: 100%;
}
/**对于大型设备**/
@media (min-width: 992px) {
.col-lg-4{
float: left;
width: 33.33%;
}
}
/* 对于中型设备 */
@media(min-width:768px) and (max-width: 991px){
.col-md-6, .col-md-12{
float: left;
}
.col-md-6{
width: 50%;
}
.col-md-12{
width: 100%;
}
}
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
text-align: center;
margin: 2%;
}
div .title{
float: right;
margin-top: 0px;
margin-right: 0px;
text-align: center;
padding-left: 5%;
padding-right: 5%;
background-color: rgb(255, 123, 0);
border: 1px solid black;
font-size: x-large;
}
#beef{
color: aliceblue;
}
.section{
background-color: grey;
margin-top: 20px;
border: 1px solid black;
}
p{
padding: 10px;
clear: right;
text-align: left;
margin: 2%;
}
英文:
The Third <div> or column breaks into a new line when adding a margin between the 3 columns. I can't add margins without disrupting the layout.
I've tried adding margins, box-sizing: border box, and using a percentage for value, but had no luck.
This is the result I am getting:
Large Screens:
> 
Medium Screens:
> 
This is the result I expected:
Large Screens:
> 
Medium Screens:
> 
/*For responsive layout*/
.container{
padding-left: 20px;
padding-right: 20px;
}
.row{
width: 100%;
}
/**For Large Devices**/
@media (min-width: 992px) {
.col-lg-4{
float: left;
width: 33.33%;
}
}
/*for medium devices*/
@media(min-width:768px) and (max-width: 991px){
.col-md-6, .col-md-12{
float: left;
}
.col-md-6{
width: 50%;
}
.col-md-12{
width: 100%;
}
}
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
text-align: center;
margin: 2%;
}
div .title{
float: right;
margin-top: 0px;
margin-right: 0px;
text-align: center;
padding-left: 5%;
padding-right: 5%;
background-color: rgb(255, 123, 0);
border: 1px solid black;
font-size: x-large;
}
#beef{
color: aliceblue;
}
.section{
background-color: grey;
margin-top: 20px;
border: 1px solid black;
}
p{
padding: 10px;
clear: right;
text-align: left;
margin: 2%;
}
Please help!
答案1
得分: 1
要实现均匀间隔的响应式 div，而不使用 flexbox，您可以利用 CSS Grid。以下是如何修改您的代码以实现所需结果的示例：
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px; /* 根据需要调整间隔 */
}
.col-lg-4 {
/* 对大屏幕设备不需要进行更改 */
}
（注意：这是您提供的CSS代码的翻译。）
英文:
To achieve evenly spaced responsive divs without using flexbox, you can utilize CSS Grid. Here's an example of how you can modify your code to achieve the desired result:
padding-left: 20px;
padding-right: 20px;
}
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px; /* Adjust the gap as needed */
}
.col-lg-4 {
/* No changes required for large devices */
}
/*
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论