如何根据一个元素的宽度设置另一个元素的宽度？
要根据一个元素的宽度设置另一个元素的宽度，可以使用多种方法，具体取决于你使用的编程语言和框架。以下是一些常见的方法：
1. 使用CSS
如果你使用的是纯CSS，可以利用CSS的兄弟选择器（~）或子选择器（>）来设置元素的宽度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Width Based on Another Element</title>
<style>
.element1 {
width: 200px;
background-color: lightblue;
}
.element2 {
width: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="element1">Element 1</div>
<div class="element2">Element 2</div>
</body>
</html>在这个示例中，.element2的宽度被设置为100%，这意味着它会继承.element1的宽度。
2. 使用JavaScript
如果你需要更动态的控制，可以使用JavaScript来获取一个元素的宽度，并将其应用到另一个元素上。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Width Based on Another Element</title>
<style>
.element1 {
width: 200px;
background-color: lightblue;
}
.element2 {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="element1">Element 1</div>
<div class="element2">Element 2</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const element1 = document.querySelector('.element1');
const element2 = document.querySelector('.element2');
element2.style.width = element1.offsetWidth + 'px';
});
</script>
</body>
</html>在这个示例中，当DOM内容加载完成后，JavaScript会获取.element1的宽度，并将其应用到.element2上。
3. 使用CSS变量
CSS变量（自定义属性）也可以用来动态设置元素的宽度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Width Based on Another Element</title>
<style>
:root {
--element1-width: 200px;
}
.element1 {
width: var(--element1-width);
background-color: lightblue;
}
.element2 {
width: var(--element1-width);
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="element1">Element 1</div>
<div class="element2">Element 2</div>
</body>
</html>在这个示例中，.element1和.element2的宽度都使用了CSS变量--element1-width。
应用场景
- 响应式设计：在响应式设计中，你可能需要根据一个元素的宽度动态调整另一个元素的宽度。
- 布局调整：在复杂的布局中，你可能需要根据某些元素的宽度来调整其他元素的宽度，以确保整体布局的一致性。
常见问题及解决方法
- 宽度不匹配：确保你获取的宽度值是正确的，并且在设置宽度时没有其他CSS规则覆盖它。
- 动态变化：如果元素的宽度是动态变化的，确保你的JavaScript代码能够监听到这些变化并相应地更新宽度。
通过以上方法，你可以根据一个元素的宽度设置另一个元素的宽度。选择哪种方法取决于你的具体需求和使用的技术栈。
相关·内容
1回答
我知道如何在加载页面时从一个元素获取宽度并设置另一个元素的宽度(参见)。
但是，如果更改了边宽(例如，如果您调整了浏览器窗口的大小)，则元素的宽度将不会更改。如何将一个元素的宽度“链接”到另一个兄弟/元素？
浏览 0提问于2019-01-24得票数 0
2回答
我正在尝试弄清楚如何使元素的宽度动态化。 我有一个带有width: 350px的侧边栏，然后当出现全*宽模式时，该侧边栏应该仍然可见。fixed; right: 0; width: 73%; outline: 0; 在宽度设置为73%;的情况下，侧边栏总是可见的，但是如果侧边栏更改了宽度<
浏览 50提问于2019-10-19得票数 1
回答已采纳
2回答
自定义CSS媒体查询条件
、、、
为了响应式设计，我想根据父元素的宽度来更改元素的一些CSS属性。父元素的最小宽度为200px，无论屏幕大小/宽度如何，最大宽度均为500px。我想根据其父容器的宽度为其子元素设置固定的宽度。
我正在寻找这个没有Javascript
浏览 0提问于2016-11-16得票数 0
我使用的是jqGrid，autowidth选项设置为true。
这使得网格占据了父元素中可用的所有宽度。此属性的另一个</e
浏览 1提问于2010-10-11得票数 23
回答已采纳
因此，我正在努力完成这件简单的事情，我需要在应用程序启动时立即读取dom元素的宽度，并将其设置为另一个元素的宽度。基本上是这样的，我有一些Tabs，它们只是一堆div元素。选定的选项卡将有一个下划线，我使用跨度来完成下划线。我的问题是，如何在dom加载后立即读取特定dom元素的宽度</
浏览 2提问于2018-06-18得票数 3
我正在尝试根据组件中元素的宽度设置计算属性。问题是，我不知道如何以一种反应性的方式获得宽度。我将元素设置为：和我<
浏览 2提问于2019-07-27得票数 2
table>和CSS：.table {display:block;}我的问题是总宽度是由一个拖放条定义的，所以所有元素的宽度必须是动态的。我希望<td>元素中的文本能够动态包装。到目前为止，<div>的宽度</e
浏览 8提问于2016-10-06得票数 3
回答已采纳
我使用的是插件，但我的页面上有两个组合框。一个元素需要比另一个元素长，但是SumoSelect并不将选择元素的宽度作为其宽度，而是使用在css文件中设置的宽度。我可以更改组合框的宽度，它可以正确显示，但下拉选择的宽度仍然由SumoSelect的css控制。显然，dropdow
浏览 13提问于2017-01-23得票数 1
我的DOM中有以下一组li。但是它们都只有一个最小宽度，宽度是根据每个li中的元素设置的。演示：#parent{ height:90px;}
我想要的是扩展li元素的宽度，使之适合父元素的整个宽度<e
浏览 0提问于2013-08-15得票数 1
我有两个同级元素(navBar & content)，其中最左边的元素(navBar)应该根据其子元素(菜单)来调整宽度。那么，如
浏览 0提问于2018-07-10得票数 0
首先，我认识到了伪元素，因此不能用jQuery作为目标.我想知道是否有另一种方法(纯css，或jQuery的一些创造性使用)来设置a的属性:在伪元素之后(在本例中，边框宽度)取决于父元素的宽度。我正在使用中描述的技术来设置导航菜单的样式，但希望三角形部分是导航元素的全宽度：但是，导航元素不会全部或始
浏览 4提问于2011-12-28得票数 2
回答已采纳
1回答
如何根据父div的宽度设置元素的高度？height: <some_ratio>vw
我得到的高度等于视口宽度的some_ratio。我想要父分区宽度的some_ratio。(我需要它在引导程序中生成正方形元素。因此，这些元素的高度必须等于列的宽度)
浏览 0提问于2017-12-09得票数 0
我猜默认的'auto‘设置会计算将值留给零以外的值。但是这个值是如何计算的呢？
另外，当值为100% vs继承时，如何计算宽度值会引起另一个混淆。我查找并意识到两者之间的区别是，虽然“宽度: 100%”将宽度设置为父元素计算值的100%，但“宽度:继承”从字面上占用父元素的CSS值，
浏览 4提问于2021-05-20得票数 0
回答已采纳
我试图根据元素的子元素数乘以每个子元素的恒定宽度来设置元素的宽度。页面上有多个这样的元素，每个元素都有可变数量的子元素。$(".parent").css("width", ($(this).children().length * 150) + "px"
浏览 11提问于2013-11-08得票数 0
回答已采纳
在我的SwiftUI代码中，有一个元素的高度是固定的，但宽度是动态的，应该根据元素的要求进行设置。如果未设置宽度，则元素的宽度应仅与子项期望的宽度相同。
如何将大小更改传播到封装的视图？
浏览 22提问于2020-06-04得票数 0
2回答
我将一个lit元素inner-element插入到另一个lit元素outer-element中。为了灵活起见，outer-element使用CSS设置inner-element的宽度和高度。inner-element需要知道它的宽度和高度来决定如何绘制它的内容。
inner-element如何在不同浏览器之间可靠地学习自己的宽度和高度？我这里有<
浏览 0提问于2019-02-04得票数 1
4回答
关于强制嵌套的div子容器填充其父容器的宽度有很多问题，但我的问题是如何强制具有比其父容器更大的自然流动宽度的子div (例如，子div包含一个文本节点，最终将子节点拉伸到超出父容器的宽度)以保持其父容器的宽度一种简单的非动态解决方案是在父级上设置宽度，但如果宽度不是预先确定的</em
浏览 2提问于2013-04-29得票数 2
回答已采纳
1回答
我正在使用flexbox中的公开元素(和)以及另一个元素。有没有什么办法可以强制折叠的元素(即)占据与展开的元素相同的宽度？目前，当我展开细节时，宽度会增加，当我再次折叠它时，宽度会减小： ? 下图显示了围绕这两个元素的flexbox： ? 我基本上希望折叠的宽度等于扩展的宽
浏览 32提问于2021-08-05得票数 0
1回答
使用CSS调整元素大小？
、、、、
您可以根据其父元素的宽度调整元素的宽度，但是否可以根据其父元素的高度来调整元素的宽度？(不使用视口变量)这方面的应用程序是通过设置元素的宽度和高度(相对于父元素的</em
浏览 7提问于2015-12-21得票数 0
回答已采纳
1回答
我有一个固定位置的容器元素，有两个子元素。两个孩子都包含文本。我希望其中一个子程序动态地设置容器的宽度及其内容。我希望另一个孩子的文本根据这个宽度进行适当的包装。text is very very long <div class="stretch">
浏览 6提问于2020-01-01得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
