css两个div不在同一行显示出来

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

如果你想要在HTML中显示两个div却不想让它们在同一行,那么你可以使用CSS的display属性。最常见的做法就是将它们设为块级元素,即使它们原本是行内元素。div { display: block

如果你想要在HTML中显示两个div却不想让它们在同一行,那么你可以使用CSS的display属性。最常见的做法就是将它们设为块级元素,即使它们原本是行内元素。

div {
  display: block;
} 

另一种方法是将它们设为浮动元素,这样它们会靠左或靠右展示。

div {
  float: left;
} 

另外,你也可以使用inline-block属性,将它们设置为行内块级元素,这样它们就能够在同一行并排显示。

div {
  display: inline-block;
} 

需要注意的是,如果你使用浮动元素或行内块级元素,它们会对父元素的尺寸有一定的影响。在这种情况下,你可能需要使用clearfix来清除浮动或者设置父元素的尺寸。

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.parent {
  width: 100%;
  overflow: hidden;
} 

最后,如果你想要使两个div上下分别展示,那么你可以将它们的display设为block,并给它们设置一定的margin和padding。

div {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
} 

希望以上的方法能够帮助你实现想要的展示效果!

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个div不在同一行显示出来

粉丝

0

关注

0

收藏

0

已有0次打赏