html – 将元素的宽度设置为兄弟的宽度

概述我有一个稍微不寻常的CSS挑战需要克服. 我有一个两列布局,其中左列的宽度由主图像的宽度设置,右边允许填充剩余的空间.主图像下方有一个容器,其自然宽度可能大于主图像.但是,我希望这个div与主图像的宽度相同,并且要隐藏溢出.以下是我尝试这样做的努力： .outer { margin-right: 5px; position: relative;}.left { float: lef 我有一个稍微不寻常的CSS挑战需要克服.

我有一个两列布局,其中左列的宽度由主图像的宽度设置,右边允许填充剩余的空间.主图像下方有一个容器,其自然宽度可能大于主图像.但是,我希望这个div与主图像的宽度相同,并且要隐藏溢出.以下是我尝试这样做的努力：

.outer {  margin-right: 5px;  position: relative;}.left {  float: left;}.right {  wIDth: auto;  overflow: hIDden;}.contentOuter {  overflow: hIDden;}.content {  wIDth: 500px;}.inner {  background-color: grey;  color: white;  wIDth: 100%;  height: 150px;}

<div >  <div >    <img src="http://placehold.it/350x150" />  </div>  <div >    <div >      <img src="http://placehold.it/500x50" />    </div>  </div></div><div >  <div >    Hello World!  </div></div>

但正如您所看到的,无论我尝试什么,.contentOuter都会延伸到其内容的宽度.

我有一个主要的警告是,除了具有固定宽度的.content之外,我不希望我的CSS中有任何其他硬编码宽度;一切都应该是完全流动的,并且列的尺寸由.image img的尺寸决定.

所以,我在视觉上看起来像这样,但没有.content上的硬编码最大宽度：

.outer {  margin-right: 5px;  position: relative;}.left {  float: left;}.right {  wIDth: auto;  overflow: hIDden;}.contentOuter {  overflow: hIDden;}.content {  max-wIDth: 350px; /* Hard-coded for demo purposes */}.inner {  background-color: grey;  color: white;  wIDth: 100%;  height: 150px;}

<div >  <div >    <img src="http://placehold.it/350x150" />  </div>  <div >    <div >      <img src="http://placehold.it/500x50" />    </div>  </div></div><div >  <div >    Hello World!  </div></div>

解决方法 解决这个问题的一种快速方法是简单地使用一些jquery.它只需要两行代码即可实现.

var imgWIDth = $('.image').wIDth();$('.content').wIDth(imgWIDth);

总结

以上是内存溢出为你收集整理的html – 将元素的宽度设置为兄弟的宽度全部内容，希望文章能够帮你解决html – 将元素的宽度设置为兄弟的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。