根据孩子的宽度设置div的宽度
可以通过以下方式实现：
- 使用CSS中的百分比单位：可以将div的宽度设置为孩子元素宽度的百分比，这样div的宽度会根据孩子元素的宽度自动调整。例如，如果孩子元素的宽度为50%，那么可以将div的宽度设置为100%。
- 使用JavaScript动态计算：可以使用JavaScript来获取孩子元素的宽度，并将其赋值给div的宽度属性。这样可以确保div的宽度始终与孩子元素的宽度保持一致。例如，可以使用document.getElementById()方法获取孩子元素的引用，然后使用offsetWidth属性获取其宽度，并将其赋值给div的style.width属性。
- 使用CSS中的flex布局：可以使用CSS中的flex布局来自动调整div的宽度以适应孩子元素的宽度。通过设置div的display属性为flex，并使用flex-wrap属性来控制孩子元素是否换行，可以实现自动调整div宽度的效果。
以上是根据孩子的宽度设置div的宽度的几种常见方法。具体选择哪种方法取决于具体的需求和场景。腾讯云提供了丰富的云计算产品和服务，可以根据具体需求选择适合的产品进行开发和部署。
相关·内容
1回答
我想让孩子们在一个弯曲的容器里对齐，他们也会伸展。此外，孩子们有一个最大的宽度。它们为什么不伸展？
.wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.box {
max-width: 500px;
border: solid;
text-align: center;
margin-bottom: 20px;
padding: 20px;
}
<div class="wrap">
<div class="box"
浏览 1提问于2021-08-12得票数 0
回答已采纳
我有一个带孩子的父容器。当子对象水平溢出(即大于浏览器窗口)时，它不会影响父服务器。如果孩子更宽，家长是否有办法根据孩子的情况调整宽度？
因此，两者都可能比屏幕更宽，我对此没有意见。我没有使用任何UI库(没有引导等等)如果子窗口小于屏幕，则两者都应调整宽度以适应浏览器窗口。
<div style="border: 2px solid red">
<div style="border: 2px solid blue; width:2000px">test</div>
</div>
浏览 3提问于2015-10-20得票数 1
回答已采纳
3回答
我有一个父母#out和一个孩子#in div。父级是绝对定位的，最小高度是100%.它有效，但如果我设定最小高度: 100%给孩子，那就没有结果了。
HTML：
<div id="out"><div id="in">foo<br/>bar</div></div>
CSS：
#out {
position: absolute;
min-height: 100%;
background-color: green;
width: 100%;
}
#in {
min-he
浏览 1提问于2013-02-10得票数 5
回答已采纳
当孩子有位置:绝对和一些填充时，我如何使孩子div达到父div的宽度？
下面是示例。我希望子节点不要延伸到父节点之后。
浏览 2提问于2010-12-22得票数 0
回答已采纳
我有一个问题，我想把一个div放在一个div后面，一个div孩子的绝对位置。
我想要做的是main div来适应main - is one的高度，正常div在main div之后发生。
下面是我的代码：
#main {
width:100%;
background-color:#f00;
padding:20px 0px 20px 0px;
position:relative;
}
#main-inner-one {
width:100%;
height:200px;
background-color:#f9c;
position:absolute;
}
#no
浏览 1提问于2016-01-13得票数 0
我有一个父元素，我想在父元素中设置元素的高度。例如：
<div id="parent">
<p id="child"></p>
</div>
现在我们知道，为了给“孩子”设置一个高度，我们还必须在“父”上设置一些高度的值。否则，单独在“孩子”上设置任何高度值将不会有任何效果。
#parent { height: 200px; }
#child { height: 75%; }
这将把“孩子”的高度设置为200px的75%。
现在，我发现，如果我们将"parent“的位置设置为绝对，我们可以不设置任何
浏览 0提问于2012-10-26得票数 1
回答已采纳
我很难让父母继承孩子的宽度。小提琴在这里，
现在我有个外型
white-space: nowrap;
而孩子们
display: inline-block;
我希望外部的div继承它的整个子类的宽度。任何帮助都是非常感谢的，谢谢！
代码：
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner">&
浏览 1提问于2013-07-28得票数 6
回答已采纳
3回答
我在div B中有一个div C，在div A中有一个div。
Div A的宽度设置为700px，div C的宽度设置为100px。Div B没有设置宽度。
我的问题是div B将宽度扩展到100% (以符合div A的宽度)。有没有办法让div B，也就是他的宽度符合孩子的div？我希望它包含在div C中，以及我放在div C附近的任何其他div中。
浏览 4提问于2009-06-03得票数 3
回答已采纳
假设父是相对的，子(风格-x)是绝对的。我用了前50%，剩下25%用来照顾孩子。
我希望把孩子放在中心，所以我设置了转换:翻译(-50%，-50%)。我不确定这是否是居中，所以我重复检查，删除该行，并添加‘边距顶部：-55 of；’(一半的高度)和‘边距-左：-45 of；’(宽度的一半)。
这两行将我的元素定位在稍微不同的位置，但这与我的CSS模型不同。到底怎么回事？
body {
height: 100%;
width: 100%;
margin: 0 auto;
}
#main {
overflow: auto;
height: 64vh;
width: 38
浏览 4提问于2016-09-12得票数 1
回答已采纳
2回答
我有一个父div和两个子div。我想让孩子2在父级中居中。我想让孩子1挂在父母的左边。如果我给孩子1一个绝对的位置，我可以让孩子左挂在容器外面。但是，子对象2仍然垂直移动了子对象1的高度。
[c1][ [c2] ]
我在这个中做了一个例子。任何洞察力都是值得欣赏的。
感谢时间
浏览 1提问于2013-07-19得票数 0
回答已采纳
我想做一半的布局。所以我制作了一个<div>，它有display: flex;，还有两个有flex-grow: 1;的孩子。就像我想的那样，一半的布局。但当我在其中一个孩子身上放点东西时，它比另一个大了。
我不太明白为什么会这样。
你能告诉我为什么和适当的CSS吗？
浏览 5提问于2015-10-28得票数 7
回答已采纳
2回答
我正在尝试创建一个画廊。将有一个可变数量的项目在这里；我需要它来适应浏览器的视窗，所以在画廊中的项目应该能够灵活地缩放。这感觉应该是一个简单的努力吗？
现在，我的DOM看起来像这样：
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
使用附带的CSS：
.paren
浏览 3提问于2021-04-18得票数 0
我有一个浮动的父元素和一个也浮动的子元素，加上一些内容为子元素提供了一些维度，如下所示：
<div id="parent">
<div id="child">
WWWWWWW WWWWWWW WWWWWWW
</div>
</div>
孩子的宽度受width和min-width的限制。
#parent {
width: auto;
float: left;
}
#child {
width: 16%;
min-width: 150px;
float: left;
}
我希望发生
浏览 0提问于2018-01-22得票数 1
回答已采纳
5回答
我希望有一个div，它的中心在它的父母，但里面的孩子会被留下对齐。为了做到这一点，我得到了以下信息：
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-c
浏览 8提问于2015-10-06得票数 1
回答已采纳
给定一个未知或可变大小的父div和一个子div，如何从父div的两边嵌入10 be？
我希望避免使用position，如果我添加了width:100%; height:100%; margin:10px;，它将导致子节点在20 by之前突出到右端和底部。
为了澄清，孩子需要适应父母的分区。父母不能长得适合孩子。父级的大小未知。
浏览 3提问于2014-03-22得票数 1
回答已采纳
4回答
也许是一个简单的问题和一个简单的答案。
今天我想知道孩子的宽度在px和100%之间有什么不同，而孩子的宽度将与父母的宽度完全相同。我知道结果是一样的，但是什么是最好的呢？
示例；
div {width: 300px;}
h1 {width: 300px;} /*or..*/
h1 {width: 100%;}
<div>
<h1>Width of child</h1>
</div>
有关系吗？你用的是哪一个？
浏览 3提问于2011-04-05得票数 2
回答已采纳
3回答
我不能让这个在IE中工作，第二个孩子不在同一行。
HTML：
<div class="outer">
<div class="inner">left</div>
<div class="inner">right</div>
</div>
CSS：
.outer
{
width: 100%;
}
.inner
{
float: left;
width: 50%;
}
浏览 1提问于2011-03-31得票数 0
回答已采纳
好的，我有一个有多个子元素的div元素。当窗口展开时，当div中不再有任何空间时，我希望孩子们整齐地适合网格的左下角和下一个可用空间。当div随着窗口展开时，在div的右侧有很多额外的空间，这些空间在添加另一列之前是不必要的。我想不出如何使div居中，同时保持内容向左浮动，让div只有内容所需的宽度。
.wrapper{
display:inline-block;
width:auto;
text-align:center;
border:solid black 5px;
margin:10px auto;
}
.wrapper > *{
margin: 0 au
浏览 0提问于2017-10-05得票数 0
2回答
更新：为大家的困惑感到抱歉.我实际上想问的是，什么是提升div高度的最佳方法？如果我将200 in宽度和300 in高度转换为可伸缩的div，宽度将为20%。我怎么能爬到这个高度呢？比如..。如何使它在不使用px的情况下保持比例？是否有一种根据宽度来设定高度的方法？用宽度大小的50%之类的东西吗？我只需要一种方法来保持div的比例，而div在宽度上调整.
我有一个父容器，需要保持在固定的像素。不过，我希望所有的孩子都是流质的。不过，在转换高度的问题上，我有点困惑。
假设我的代码以前是这样的：
#parent {width: 1000px;}
#child {width: 200px; hei
浏览 2提问于2013-11-08得票数 3
1回答
我创建了一个css (尝试调整浏览器窗口的大小:您将看到框的高度按照大小调整)：
<div id="container">
<div id="absolutly">
<a href="/" id="footer-logo">
<img title="caneppele" alt="caneppele" src="http://oi59.tinypic.com/20shvh4.jpg" />
浏览 1提问于2014-07-02得票数 0
回答已采纳
2回答
我的身体里有三个div:一个容器，一个父母和一个孩子。
我正试着让孩子在左边的父母之外伸长。
但是如果我用position: absolute这样做，父母就不会伸展到期望的高度.
position: static
position: absolute
使用margin-left: -20px也做不到:最终，我将有其他嵌套的父级，并且需要所有的子级扩展到外部左侧。
到目前为止她的密码是我的：
#container {
position: absolute;
width: 300px;
}
.parent {
margin-left: 20px;
}
浏览 6提问于2014-05-06得票数 2
4回答
我有一个div和溢出-x自动。此div具有比父div更宽的子区域，从而导致滚动。
里面的孩子被赋予一个边框和背景色，我想把它延伸到他们的整个宽度--包括滚动的溢出。内部孩子的实际内容是动态的，所以我不能给他们一个固定的宽度。
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
}
.inner {
border-bottom: 1px solid blue;
background-color: red;
}
<div class="
浏览 0提问于2018-10-16得票数 2
回答已采纳
1回答
请考虑以下示例：
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #C0C0C0;
background-color: #202020;
display: flex;
flex-direction: column;
align-items: center;
}
* {
box-sizing: border-box;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: fle
浏览 1提问于2021-08-24得票数 2
回答已采纳
5回答
我有一个div，有5个孩子。我希望父母的空间能平等地分配给这5个孩子。因此，如果父母的宽度为1000 if，那么每个宽度为200 if的孩子。我已经尝试为孩子设置width: 20%; height: 20%;，但问题是父母将没有定义的高度。父级高度将由子级高度决定。因此，如果调整屏幕的大小，每个接受1/5 of width of the parent的孩子，孩子的高度也将相等于它的宽度。因此父级宽度将是屏幕的100%，父级高度将等于子级高度。我尝试过媒体查询，但我认为这是一个更简单的方法，因为我只是改变宽度和高度，我没有改变页面的总体设计。
<div id="parent
浏览 5提问于2015-10-07得票数 1
回答已采纳
我在这里有点问题。我有一个装有不同尺寸的儿童的柔性箱容器。根据数量和内容，子级可能会溢出父级。
我想要的是孩子们收缩，这样他们才能适应父容器。为此，我向子级添加了收缩和溢出属性。到目前一切尚好。
.container > div {
background-color: orange;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
最后我得到了这样的结果：
现在，我希望他们缩小，但在一定程度上，(比方说
浏览 6提问于2020-10-06得票数 7
回答已采纳
我有一个容器的位置:亲戚和三个孩子的位置:绝对。
HTML
<div class="container">
<div>left</div>
<div>middle</div>
<div>right</div>
</div>
CSS
div{
border:1px solid;
}
.container{
height:200px;
position:relative;
}
.container > div{
heigh
浏览 5提问于2015-01-19得票数 0
回答已采纳
2回答
我试图找出阻止边界从它的父容器溢出的方法。
我能找到的唯一解决方案是使用calc()来计算和减去孩子边框的宽度和高度来设置孩子的宽度和高度。
有什么更好的方法来处理这个问题吗？
什么样的解决方案适合于前IE8？
下面是示例。
CSS
.container {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
clear: both;
background-color: purple;
}
.child {
width: 100%;
height: 100%;
bord
浏览 5提问于2014-06-24得票数 0
回答已采纳
我有一个动画评分栏，当你将鼠标移到它上面时，它会改变宽度。
我试着写一个问题的解释，但我认为看一下链接要容易得多。
基本上，当鼠标悬停在孩子div上时，当他们改变div的大小时，我很难将div居中。我同时尝试对父div的宽度进行动画处理，但没有成功。
浏览 1提问于2010-10-10得票数 0
2回答
我有一个4:3父母，一个孩子缩小和居中。最后，一个4:3的孩子在里面。
.table {
position: relative;
width: 400px;
height: 300px;
border: 1px solid;
}
.top {
position: absolute;
left: 15%;
right: 15%;
top: 20%;
bottom: 20%;
background: yellow;
}
.item {
position: absolute;
width: 10%;
height: 50%;
backgro
浏览 1提问于2016-02-12得票数 1
4回答
我想为web应用程序构建一个面包屑控件。当容器中的空间不够大时，应该截断每个flex框子中的文本，以显示所有内容。问题是矮小的孩子会随着较大的孩子而缩小，很快就会变得不可读。
三个矮小的孩子看上去很好：
但是，一旦一个孩子有了更多的文字，一切都会缩水：
是否有一种方法可以配置flex盒，首先将较大的孩子缩小到与较小的孩子相同的大小？
理想情况下，示例应该如下所示：
.container {
display: flex;
width: 600px;
}
.child {
font-size: 30px;
margin: 0 10px;
te
浏览 0提问于2019-02-27得票数 1
回答已采纳
2回答
如果我有一个没有指定宽度的父<div>，以及指定了固定宽度的子<div>，并且该窗口小于固定宽度.<div> /中的哪些规则导致父仅是窗口的宽度而不是子窗口的固定宽度？
使用下面的片段，父母的背景颜色为红色.孩子比它住的窗户大得多。
如果您运行片段并向右滚动窗口，您将看到父窗口的红色背景与窗口本身一样宽，尽管孩子要大得多？
#parent {
background-color:red;
}
#child {
width:1000px;
}
<div id="parent"><div id="child
浏览 0提问于2017-04-12得票数 4
回答已采纳
嗨，我有以下HTML：
<div>
<div style="display:inline-block;">
Child one **************************************
</div>
<div style="display: inline-block;width: 100px;">
Child two
</div>
</div>
当我调整浏览器的大小时，父div开始缩小。一旦没
浏览 2提问于2013-04-12得票数 2
回答已采纳
我想不出一种优雅的方式让我的div在CSS中按如下方式显示
---------------------------------------------------------
| |
| child div 1 child div 2 child div 3|
| |
-------------------------------------
浏览 0提问于2011-12-15得票数 2
回答已采纳
2回答
我有一个带有overflow:hidden;的父容器，里面有块，我希望将其中的一些块“隐藏”在父容器的溢出中。
例如：
...| from here these are hidden off page
[ ] [ ] [ ] [ ] [ ]
在上面，我只希望第一个块在屏幕上，其他的在隐藏的溢出中。
我试过使用：
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<
浏览 0提问于2018-05-13得票数 0
5回答
我有一个父母的孩子，里面有两个级别的孩子，
<div class="grandParant">
<div class="parant1">test</div>
<div class="parant2">
<div class="child">Hello world this is a long test string</div>
<div class="child">12<
浏览 8提问于2013-03-21得票数 1
回答已采纳
1回答
我需要一些关于flexbox的基本帮助。这个问题可能已经问过了，但我哪儿也找不到。
我有一个容器div设置为display: flex;，其子类数量未知，如下所示：
<div class="container">
<div class="child">First child</div>
<div class="child">Second child</div>
...
<div class="child">Nth child</div&g
浏览 4提问于2021-08-31得票数 3
回答已采纳
假设我有两个孩子--父母和孩子。父div的宽度为200 105，子div的宽度为105%。现在，孩子的右边将向外流动。以下是代码：
.container1 {
width: 200px; height: 200px;
border: 1px solid black;
margin-left: 100px;
}
.container2{
width: 105%;
border: 1px dotted red;
height:
浏览 3提问于2016-03-26得票数 1
回答已采纳
4回答
我有一个家长办公室，里面没有几个孩子。两人都离开了。问题是当子div中断到下一行时，父div得到了错误的宽度。
这是我的HTML
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
和CSS：
.parent{
float:left;
border:1px solid black
浏览 5提问于2013-11-01得票数 1
回答已采纳
1回答
我有一个简化的版本，我试图在一个项目中做什么。父级可以有任意数量的子级，因为它们是从数据库中提取的。孩子们没有固定的宽度。我想在包装前设置一个最大的每行列数，如果小于这个最大值，子行就会扩大并填充这个空间。正如你在下面的例子中所看到的，当只有3个孩子的时候，右边有一个和第四个孩子一样大的缺口。我怎样才能做到这一点？
#parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
}
.children {
background-color: red;
height: 2em;
}
&l
浏览 9提问于2021-06-24得票数 1
回答已采纳
2回答
好的,
考虑以下代码：
<div class="grid-container">
<div class="grid-20 padright">
<h3 class="padhalf blue-header">
This is 20% Wide
</h3>
</div>
<div class="grid-80 padleft">
浏览 3提问于2015-05-07得票数 1
是否有可能使子元素(填充)的父元素的宽度和高度达到100%？
html：
<div id="parent">
<div id="child"></child>
</div>
css：
#child {
padding: 15px
}
我已经尝试使孩子100%的宽度/高度，但这使孩子比父母大，因为填充。
我也试图使孩子的位置是绝对的，把顶部、底部、左边和右边设置为0，这对于宽度而不是高度是有效的。
父级可以是可变大小的。
此外，还需要在IE8上工作。
浏览 8提问于2014-05-23得票数 6
回答已采纳
我有一个以水平为中心的div和两个孩子。每个孩子都垂直地以display: table-cell和vertical-align:middle为中心。
当屏幕(或父容器)足够宽，使所有文本都位于一行时，所有内容都能正常工作。但是，如果屏幕/父级缩小，那么文本就会包装并留下大量的空白。为什么div不收缩以适应文本？
下面的图片显示了问题所在。一切都是我想要的方式，在最上面的形象。灰色部分包装内容，并在其父容器中居中。但是，如果父文件收缩到文本包装，则会留下一组空白(请参阅红色矩形中突出显示的区域)。这个空格创建了整个元素左对齐而不是居中的错觉。
到目前为止，这里有一个jsFiddle示例：
有没有
浏览 1提问于2013-10-02得票数 2
我很难让LinearLayout表现得像我想要的那样。不幸的是，MATCH_PARENT和WRAP_CONTENT这两种维度模式似乎都不适合我的目的。
原因如下:我希望添加到LinearLayout中的子元素完全可见。任何事情都不应该被切断。因此，通常情况下，我应该使用WRAP_CONTENT来实现这种行为。
但是，如果LinearLayout中有比孩子真正需要的更多的空间，我也希望它能填补这个空间。这当然是MATCH_PARENT的目的。
但是，我不能使用MATCH_PARENT，因为如果中的空间比我的孩子需要的要少，那么使用MATCH_PARENT就会切断我不想要的子空间。
因此，这让我对
浏览 0提问于2018-07-23得票数 0
2回答
好的，快速虚构的例子：
<div style="background: #CCC; margin: 10px;">
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div>
<div style="width: 600px; height: 400px; background: #999;">Child #2</div>
</div>
如果我将浏览器调整到小于600px的宽度(子窗口#2)
浏览 0提问于2010-02-08得票数 3
我有一个显示弹性div和两个孩子。
第一个有一个带有这个css的文本：
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
flex: 1
这个css当第一个孩子有一个大的文本时，让第二个孩子摘掉行，隐藏他的一些内容。
如何设置第一个子项的宽度，以使第二个子节点不偏离行，并且两个宽度都被填充？
通过这个图像，您可以看到dom、css和问题。
浏览 2提问于2022-05-15得票数 1
3回答
我不知道也不可能知道我需要居中的绝对div的宽度。它必须绝对定位，因为它与其他元素重叠(z索引技巧)。这是我的基本结构
<div style='position:relative'>
<div></div>
<div style='position:absolute'>...</div>
</div>
第一个子div的绝对位置不能将其高度和宽度借给父div。第二个div必须与其同级重叠，并且水平居中。
上面的结构只是我的困境的一个例子，在现实中，父div会有很多孩子，并不是所
浏览 0提问于2010-07-01得票数 4
我有一个比包装器更大的ul，我希望能够将它拖到最后一个孩子(带有容器)。
我有这样的代码来拖拽ul和工作正常(没有包含)。
$( "#myList" ).draggable({ axis: "x" });
下面是工作页面：
但我需要帮助限制拖动，如果我使用
$( "#myList" ).draggable({ axis: "x", containment: '#width' });
它的行为很有趣..。
如何使用隐藏的溢出包装器和包含div的容器使ul拖动平稳？
太棒了！
浏览 3提问于2012-06-14得票数 1
4回答
我在一个网站上工作。我对div有点问题
<div class="parent">
<div class="child" style="display:inline-block; z-ndex:1000;">
<img src="" style="max-width:100%; max-height:100%"/>
</div>
</div>
html：
.parent {
clea
浏览 0提问于2013-12-24得票数 0
正如标题所描述的，我有一个包含子div的父div。 我不知道会有多少个孩子，所以我不能给父母一个固定的身高。 儿童潜水的高度在悬停时增加。 我怎样才能使父母的身高与其孩子相关，同时又不会随着他们的身高增加而增加呢？ 正如您在代码中看到的，"parent2“具有所需的功能，但它的高度是固定的，这是我无法使用的。 不使用javascript的PS HTML <div class="parent">
<div class="child"></div>
<div class="child">
浏览 18提问于2019-06-22得票数 0
我需要根据父元素设置元件尺寸。是否有可能在渲染之前通过引用从virtualDOM获取父对象的宽度和高度？
父级
export default class App extends React.Component {
render() {
return (
<div>
<div className={'avocado-container'} ref={(container) => { this.container = container; }}>
<Resizer parent={
浏览 2提问于2017-02-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
