使用css和HTML排列div

我正在尝试使用CSS将4个

div

inline对齐，并使它们具有响应性

我试过这个css

.col {
  border:1px solid black;
  width:20%;
  display:inline-block;
  padding:5px;
  margin:5px 5px 5px 5px;
  text-align:left;
}


@media only screen and (max-width: 800px) {
  .col {
    width:40%;
  }
}

@media only screen and (max-width: 500px) {
  .col {
    width:100%;
  }
}

但随着屏幕变小，它们的大小略有不同

我创建了一堆代码：

我试着让它像：

你可以试试这个

@media only screen and (max-width: 500px) {
  .col {
    width:80%;
  }
}

希望这能解决问题

但随着屏幕变小，它们的大小略有不同

两件事

仔细计算

div

s占用的总宽度。特别是，有利润和所有。为了安全起见，最好定义您的

框大小

，以便您知道并控制宽度

将此添加到您的CSS

* { box-sizing: border-box; padding: 0; margin: 0; }

。。。将有助于保持标准的

框大小

，并为您充当一个非常简单的规范化/重置CSS。这样，您就知道在计算宽度时，

边距

s将不包括在内。因此，您需要从容器的总宽度中减去

边距

s，以获得孩子

div

s的最佳尺寸

例如：

.cont { width: 100%; } /* total width of parent */
.col {
  margin: 1%; /* margin of 1% means a total of 2% left-and-right margins */
}
@media only screen and (max-width: 500px) {
  .col { width: 98%; } /* reduce 2% from the total width */
}

您将孩子的

div

s设置为

display:inline block

。现在，您需要注意这一点，因为

内联块

也考虑了空格。因此，在您的例子中，HTML中的中断会导致

div

s之间的额外间距，并且在您看来，大小变得不同。当您更改屏幕大小时，这种情况更加明显

有两种方法可以消除这种情况，但具体来说，在您的情况下，零字体大小的技巧将起作用。将父项上的

字体大小保持为
0
，以折叠空白：

.cont { font-size: 0px; }

然后，再次重置孩子的
div
s上的
font size
：

.col { font-size: 16px; }

将两者结合在一起，您可以得到：

小提琴：

片段：


*{框大小：边框框；填充：0；边距：0；}
续{
宽度：100%；边框：1px纯黑；
文本对齐：居中；字体大小：0px；
}
上校{
边框：1px纯黑；
宽度：20%；显示：内联块；
填充：5px；边距：1%；
文本对齐：左对齐；
字体大小：16px；
}
@仅介质屏幕和（最大宽度：800px）{
上校{
宽度：40%；
}
}
@仅介质屏幕和（最大宽度：500px）{
上校{
宽度：98%；
}
}

上校
上校
上校
上校
上校
上校
上校
上校
我修改了Abhitalks的小提琴。我已删除填充：0；利润率：0；从所有方面来看，我认为这不是必要的。如果要将容器div设置为100%宽度，则所有其他尺寸和边距单位也需要为%

关键是从.col的宽度中减去2%，以允许边距“接触”容器div的填充

.col {
   border: 1px solid black;
   width: 23%; display: inline-block;
   padding: 2%; margin: 1%;
   text-align: left; 
   font-size: 16px;
}


当.col在窄屏幕上变得非常小时，您可能需要进行媒体查询。
为什么不试试

以下是方法：


.cont{
宽度：100%；
边距：0自动0自动；
边框：1px纯黑；
文本对齐：居中；
-webkit列数：4；
/*铬、狩猎、歌剧*/
-moz列数：4；
/*火狐*/
列数：4；
}
上校{
边框：1px纯黑；
}
@仅介质屏幕和（最大宽度：800px）{
续{
-webkit列数：2；
/*铬、狩猎、歌剧*/
-moz列数：2；
/*火狐*/
列数：2；
}
}
@仅介质屏幕和（最大宽度：500px）{
续{
-webkit列计数：1；
/*铬、狩猎、歌剧*/
-moz列数：1；
/*火狐*/
列数：1；
}
}

上校
上校
上校
上校
上校
上校
上校
上校
媒体查询是您自己编写的，您清楚地了解它们的效果吗？因此，请检查live页面上的元素，您将获得您的风格。@Vucko我很想这样做，但我认为这并不容易！我看不到大小不同的
.col
div，但当屏幕宽度在500-800 px范围内时，它们没有正确对齐。这样看起来更好，有没有办法使四个显示在.cont容器的边缘？@charlie:这更容易。你不需要
内联块
和其他技巧来驯服它们。只要
float
div

s就可以了。看——基本上，我想要四个25%的内联，每个都有边距，最好的方法是什么？我需要将边距设置为1%，然后将宽度设置为21%（每个宽度减少1%）@charlie:看来你想要这种布局--——是吗？