Html 将div设置为具有其同级宽度

我正在寻找以下CSS解决方案：-

此div的内容是动态创建的，但始终比
下面的部分。
需要此div与上面的div具有相同的宽度。

我不确定我是否理解您试图执行的操作，但看起来将100%宽度设置为最后一个div应该可以：

<div style="width:100%;"> 

顺便说一句，第一个div中的样式没有很好的定义，您应该在属性定义中使用冒号而不是等号：

<div style="display:inline;">

---

将div设置为

display:inline block

，这样，您的div将随着其中的内容展开

---

更新：这对我很有效，我刚刚尝试过：

<div style="max-width:980px;border:1px solid red;">
   <div style="background:#EEE;float:left;">
     <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
     <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
   </div>
     <div style="clear:both;"></div>
</div>

如果在这里使用100%，它将自动适应母div的宽度。
该部门也将是母部门的100%。

这是你想要的吗？边框和背景仅用于显示div；）

---

就这样说吧：

假设您希望整个div的最大值为980px（否则只需将其忽略或替换为100%）

如果在这里使用100%，它将自动适应母div的宽度。
该部门也将是母部门的100%。

---

第二种选择是，再使用一个div。。。或者对动态div使用

style=“width:auto；”“

。

浮点数和表格都是2000或更晚。在今天的浏览器中，我们可以使两个兄弟div的宽度相互匹配，而不管哪个更大/更小

以下是适用于2016年的Flexbox解决方案：

.wrapper{
显示：内联块；
}
.家长{
显示器：flex；
弯曲方向：立柱；
}
/*用于可视化*/
.孩子{
边框：1px实心#0EA2E8；
保证金：2倍；
填充物：1px 5px；
}

一号孩子
儿童#2

如果你愿意放弃几个

的话，我有一个解决方案给你：

表格会自动使其同级具有相同的宽度
所以这将是一样宽的

这里是另一个Flexbox解决方案，它允许第二个子对象进行包裹，以匹配可变高度同级对象的宽度

.wrapper>div{
边框：1px实心；
}
.孩子{
显示器：flex；
}
.儿童组{
柔性生长：1；
宽度：0；
}
.包装纸{
显示：内联块；
}

此div根据其内容动态调整大小
此div的宽度将始终与前一个div相同，即使其内容更长（或更短）。

这里仍然是一种基于flexbox的方法

其基本思想是：在最外层的包装中，需要具有相同宽度的元素被包装到另一个包装中

.wrapper{
显示：内联块；
}
.柔性包装{
显示器：flex；
弯曲方向：立柱；
}
.演示栏{
高度：4px；
背景颜色：深蓝；
}

一些可编辑的文本。

2021保持简单。。。 使用

grid

和

fr

行动单元？然后，您可以根据需要拆分为任意多个大小相同的行或列：

.container{
显示：网格；
网格模板列：重复（2，1fr）；
栅柱间隙：1米；
}
.container>div{
边框：1px纯黑；
填充：0.5em；
}

我是网格的一部分。根据网格的列数，我将与我的其他兄弟姐妹分成相等的部分。
我是一个兄弟元素。

div是一个块元素，它们自动采用其父元素的宽度。检查这个，它是。两个内部div的宽度都最大化，以适合其父级的宽度。这可能不是你的意思…谢谢你的评论。我给了包装器div一个display:inline属性，这意味着它取其最宽子级的宽度。现在我需要的是让第二个子div占据第一个子div的宽度。检查我上面的小提琴：）@sandeep我不希望包装div占据整个屏幕。我希望它像它最宽的孩子一样宽。我希望这是有意义的。没有必要定义宽度：100%，因为div是一个块元素&它是take auto width这迫使包装div占据整个屏幕，而不是将子div设置为包装div的100%。。。是的；）很好。在花了很多时间摆弄CSS之后，我决定抽出一些时间来使用表格。半分钟=工作完成。现在不要一下子尖叫和叫喊！谢谢你的贡献。在上面的示例中，我希望第二个子div采用第一个子div的宽度，即它的上一个同级。@user1278456您可以将容器div设置为

display:inline block

，而不是

display:inline

，这样您就得到了那些结果，但这并没有给我想要的结果。我想要的是底部div取上面提琴中没有的顶部div的高度。@user1278456啊，刚刚理解你的问题，试试这个：。。使用通用同级选择器，您可以将样式应用于第一个div之后的div。啊，恐怕这也不会产生预期的效果。因为它是母亲div的100%，对吗？如果不是您想要的，请对两个内部div使用width:auto。。这个有用吗？你想要吗？@user1278456:我刚刚更新过，它对我有用。。。请让我知道这是否是您想要的：）但是如果您不想让第二个孩子来指定宽度（而且它比第一个孩子长），这将不起作用。第一个孩子会变得和第二个孩子一样宽。@Skitter我是对的，但问题是：“我需要最下面的一个来测量上一个兄弟姐妹的宽度”。@pilau是的。正如skitterm所说，如果最底层的孩子比前一个兄弟姐妹有更大的内容，这个解决方案就行不通了。你知道的。如果没有写入

子#2

。这可能是一种罕见的情况，但你知道，在现实世界中，

<div style="max-width:980px;">
     <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
     </div>
     <div style="width:100%;"> The div will be 100% of the mother div too.
     </div>
</div>