外层div根据内部div宽度自动调整宽度

Posted 2023-05-10

我建立了两层div：
<div id="dragdiv"
style=" WIDTH: 103px; Z-INDEX: 1; top: 982px; left: 0px;" onselectstart="return false" scrolling="no">
<div style="position:absolute;padding:0px;background:#D6E7FF;border:1px solid #96E0E2;">
<ul id="movelist" style=" font-size:14px; list-style:none; padding:0px;margin:0px; height:17px ">
<li><span></span></li>
</ul>
</div>
</div>
其中<span></span>中的值是动态添加的，现在问题是如果加入的数据过长，最外层的dragdiv的宽度不能被撑大
注意：dragdiv是一个可的拖动层

第二个DIV加了position:absolute，就是脱离文档流了，没办法撑开它外面的DIV 参考技术A overflow:hidden 超出部分隐藏掉行不行追问

不能隐藏，必须要撑大宽度

参考技术B 简单看了下你的代码,你把最外层的 dragdiv 的width 属性值给删除掉,这不就变成自适应的了么???

如何自动调整内部图像/内容的 div 宽度？

【中文标题】如何自动调整内部图像/内容的 div 宽度？

【英文标题】：how to div width automatically adjust inside images / content?

【发布时间】：2015-07-07 07:15:43

【问题描述】：

演示小提琴：http://jsfiddle.net/UI_Designer/2gqy9s9k/1/

容器有 4 个块..每个 div 包含 width:25%.. 所以完成容器...

如果我删除任何一个div 容器有空的空间.. 但我想再次装满容器.. 它有可能吗？

.container
    width:100%;
    border:1px solid #333

.badge-block
    float:left;
    width: 25%;
 
.badge-block img 
    width:80%;

【参考方案1】：

您可以为此使用display: table; 和display: table-cell。我很确定这就是你的意思。

表格单元格占用剩余空间。所以只要像这样使用它，取出其中一张图像，你就会看到它是如何工作的。

Demo Here Too

.container 
  width: 100%;
  border: 1px solid #333;
  display: table;

.badge-block 
  display: table-cell;

.badge-block img 
  width: 80%;

<div class="container">
  <div class="badge-block">
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
      <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
    </a>

  </div>
  <div class="badge-block">
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
      <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
    </a>

  </div>
  <div class="badge-block">
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
      <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
    </a>

  </div>
  <div class="badge-block">
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
      <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
    </a>

  </div>
</div>

【讨论】：

这让我很开心 :)

@user10 太好了，如有任何问题，请随时回来询问。

【参考方案2】：

display: table-cell 是你的朋友。

.container
    width:100%;
    border:1px solid #333;
    display: table;

.badge-block
    display: table-cell;

.badge-block img 
    width:80%;
    

<div class="container">
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
</div>

<div class="container">
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
</div>

或者，如果您只需要支持现代浏览器，您可以使用 flexbox...

.container
    width:100%;
    border:1px solid #333;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;


.badge-block img 
    width:80%;

<div class="container">
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
</div>
<div class="container">
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
	<div class="badge-block">
		<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
	</div>
</div>

【讨论】：

支持 Flexbox 方式

【参考方案3】：

您可以在容器上使用display: table 和table-layout: fixed 来固定列中的相同宽度。 在您的 div（单元格）中，您可以应用 display: table-cell 并删除浮动。

像这样：

.container 
    display: table;
    table-layout: fixed; // Fix all columns to same width
    width:100%;
    border:1px solid #333

.badge-block 
    display: table-cell;
    width: 100%;

http://jsfiddle.net/2gqy9s9k/4/

【参考方案4】：

经典的方式是display: table-cell，但 Flexbox 绝对是未来。

使用Flexbox，您可以轻松实现这一目标，现在所有主流浏览器都支持它的第三个版本，即“标准”版本。

运行代码 sn-p 并向下滚动。

.container      
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;


.badge-block
    margin: 0 auto;


.img-responsive
    width: 100%;

<div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div>	<div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div>	<div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div>	<div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div>	<div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div>

不要错过Complete Guide to Flexbox，看看Flexy Boxes，这是一个惊人的工具，可以直观地创建带有前缀的 Flex 代码。