使嵌套的div看起来像css中的列
嵌套的div可以通过一些CSS样式来实现类似于列的效果。可以使用flexbox布局或者网格布局来实现。
- 使用Flexbox布局： Flexbox布局是CSS3中引入的一种弹性布局模型，通过设置容器的flex属性和子元素的flex属性，可以实现灵活的布局效果。以下是使用Flexbox布局将嵌套的div看起来像CSS中的列的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row; /* 设置为行布局 */
}
.column {
flex: 1; /* 让子元素平分宽度 */
margin: 10px;
padding: 10px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</body>
</html>以上示例中，通过设置容器为display: flex;，并且设置flex-direction为row，使得子元素水平排列。通过设置子元素的flex: 1;让子元素平分宽度，并且添加适当的间距和背景色，即可使嵌套的div看起来像CSS中的列。
- 使用网格布局： CSS网格布局是CSS3中引入的一种二维网格布局模型，可以将容器划分为行和列，并通过设置子元素的位置和大小实现布局。以下是使用网格布局将嵌套的div看起来像CSS中的列的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 划分为3列 */
grid-gap: 20px;
}
.column {
background-color: #eee;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</body>
</html>以上示例中，通过设置容器为display: grid;，并且设置grid-template-columns为1fr 1fr 1fr，将容器划分为3列，并且通过设置grid-gap添加间距。子元素通过设置背景色和内边距来进行装饰，即可使嵌套的div看起来像CSS中的列。
无论使用Flexbox布局还是网格布局，都可以很方便地实现使嵌套的div看起来像CSS中的列的效果。对于更复杂的布局需求，可以根据具体情况选择使用不同的布局模型。
相关·内容
我有嵌套的div表示生命数据树，例如 <div> <div> <div> Sapiens </div>
</div> 我想让它看起来</
浏览 56提问于2018-01-18得票数 2
回答已采纳
1回答
我尝试在一列中嵌套多个行。
问题是，我将整件事情垂直居中，css规则似乎也适用于我的子行。我怎样才能阻止这种对齐，使它看起来像我想要的？到目前为止，我得到的是：.vertical-center { min-height: 100vh; align-itemscenter;<
浏览 1提问于2018-10-07得票数 3
回答已采纳
2回答
我的div列看起来像下面的截图。如何使列对齐，使它们的高度相同，而不管内容的差异如何？单独使用简单的html/css，或者在javascript/jquery/angularjs的帮助下使用，但是没有引导，因为我不允许使用该框架。
浏览 2提问于2017-11-01得票数 1
回答已采纳
2回答
使用最新的twitter引导包，我在调整列的大小时遇到了问题，它确实破坏了该列中项的设计。
是否有一种简单的方法来阻止要调整大小的元素(列/div)。即使在右边有相当多的空空间，“调整大小”也会过早触发--我能看到的是，无论如何，要控制它？更新：作为站点是使用Python和Jinja2模板生成的，获得所有代码有点麻烦，但是我得到了一个测试页面，显示了问题
浏览 3提问于2012-09-14得票数 2
回答已采纳
1回答
因此，我想我应该设置一个小的“表单”，看看我是否能让它流畅，我做了一个非常糟糕的工作。我正在尝试将内容分组为2，并且每行不超过5个文本框，即使在最大的设置中也是如此。当我尝试正确地设置它时，我在左右两列之间得到了大量的空格。我试着设置页眉，但这个换行很奇怪，当我尝试处理文本框时，两列之间有大量的空格
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
浏览 2提问于2016-05-28得票数 0
2回答
我有来自外部源的HTML内容可供使用。它用div标记，看起来有点像这样： </head> <div class="book">
<div class="author">Author 1</div>&qu
浏览 0提问于2013-06-03得票数 0
回答已采纳
我希望我的tbody是可滚动的，同时让thead保持静态。这是我试过的代码，但它不能工作 height: 200px;}
我也尝试过使用overflow:scroll;，但也不起作用
浏览 0提问于2011-06-01得票数 1
2回答
我需要在不接触HTML的情况下取出右侧列中的元素。目前，最现实的选择似乎是CSS网格布局。如果我的HTML看起来像这样，有没有可能呢？<div class="parent"> <div cl
浏览 5提问于2019-07-09得票数 0
回答已采纳
1回答
我试图使一个div看起来像一个没有边缘的白色发光圆。css的实现方法是：body {} border-radius: 50%; width: 275px; /*
浏览 5提问于2014-11-27得票数 1
回答已采纳
1回答
我试图使用css和div创建一个站点布局，其标准如下：
这是我的 <div id="dvStructure_Outer&quo
浏览 3提问于2015-02-03得票数 0
回答已采纳
2回答
我有一个表，其中我需要行中的最后一个td看起来像一个嵌套行。请参阅此。您可以单击该图标以查看出现的新行。但是我不能使用新行，它需要在同一个DOM行中。我希望最后一列向下移动，使其看起来像一个新行。它不必对齐，只需转到新行即可。
有没有css<
浏览 0提问于2016-07-13得票数 0
1回答
我有一系列的物品。我想要切换他们的不透明度或动画他们。它们都是一边倒的物体。我也想用一个开关来改变整个div及其内容的不透明度。在同一页上，我有一个div和一个切换数组来完成动画。我正试图使用，没有javascript - css，只使用来实现这一点。
为了简化事情，下面的代码就是一个例子。我想切换包含蓝色圆圈的div中所有东西的不透明度。我想通过取消选中绿色div中的</
浏览 4提问于2022-02-16得票数 0
2回答
这是我当前的html结构，我查看了其他来源，有些人有不同的意见，并想专门询问我的情况。 </div>
<div>content<&#x
浏览 5提问于2016-10-24得票数 0
回答已采纳
我需要选择一个元素的子元素，但是它基于父元素上的最后一个类型。我试过： &__content { }因为SASS构造的方式不起作用。我的结局是： &__list-item { border-bottom: 1px solid;&__content {
border-bott
浏览 0提问于2019-01-02得票数 1
回答已采纳
4回答
是否可以使用CSS使带有make值的输入HTML元素看起来像div中的文本？使边框消失，并使输入的背景颜色与页面背景颜色相同。
浏览 1提问于2011-03-22得票数 1
回答已采纳
3回答
我需要调整引导列，使之看起来像这样。问题是，在较小的设备上，我只想隐藏这个空白区域的侧面，因此，我不想只使用边距或垫子。，包括引导带。<div class="container">CSS height: 230p
浏览 6提问于2016-02-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
