如何通过一个子元素影响元素的宽度，但不使用CSS影响元素的宽度

Question

正如标题所描述的，我希望找到一种CSS方法来使一个元素的宽度影响其父元素的宽度，但强制该父元素的其他子元素适合在那个宽度内。

下面是我使用的代码：

<div id="leftToolBar" class="toolbar"> 
    <div id="canvasHolder"></div> 
    <div> 
      <a id="tool_pencil" onclick="setTool('pencil'); return false;" href="#" class="currentTool"><img src="images/pencil.png"/></a> 
      <a id="tool_paintbrush" onclick="setTool('paintbrush'); return false;" href="#"><img src="images/paint.png"/></a> 
      <a id="tool_floodfill" onclick="setTool('floodfill'); return false;" href="#"><img src="images/bucketfill.png"/></a> 
      <a onclick="transform('shiftleft'); return false;" href="#"><img src="images/left.png"/></a> 
      <a onclick="transform('shiftright'); return false;" href="#"><img src="images/right.png"/></a> 
      <a onclick="transform('shiftdown'); return false;" href="#"><img src="images/down.png"/></a> 
      <a onclick="transform('shiftup'); return false;" href="#"><img src="images/up.png"/></a> 
      <a onclick="transform('rotleft'); return false;" href="#"><img src="images/rotateleft.png"/></a> 
      <a onclick="transform('rotright'); return false;" href="#"><img src="images/rotateright.png"/></a> 
      <a onclick="transform('diagonal1'); return false;" href="#"><img src="images/dflip1.png"/></a> 
      <a onclick="transform('diagonal2'); return false;" href="#"><img src="images/dflip2.png"/></a> 
      <a onclick="transform('vflip'); return false;" href="#"><img src="images/vflip.png"/></a> 
      <a onclick="transform('hflip'); return false;" href="#"><img src="images/hflip.png"/></a> 
      <a onclick="toggleGrid(); return false;" href="#"><img src="images/grid.png"/></a> 
    </div> 
</div> 

而且这里是有关CSS（迄今）：

.toolbar a{ 
      display: inline-block; 
      width: 20px; 
      height: 20px; 
      text-align: center; 
      line-height: 24px; 
      border-radius: 0.2em; 
      padding: 3px; 
      border: 1px solid #AAA; 
    } 

    .toolbar a.currentTool{ 
      box-shadow:-1px -1px 1px 1px rgba(0,0,0,0.5) inset, 1px 1px 1px 1px rgba(255, 255, 255, 0.8) inset; 
      border: none; 
    } 

    #canvasHolder { 
      background-color: #a0a0a0; 
      border: 1px solid #777470; 
    } 

    #canvasHolder canvas{ 
      border: 1px solid #666; 
      background: repeating-linear-gradient(
        45deg, 
        #CCC, 
        #CCC 2px, 
        #CCC 4px, 
        #AAA 6px 
      ); 
      display: inline-block; 
      vertical-align: center; 
    } 

这当然是没有做我想要的。我想用“canvasHolder”div来确定该工具栏的大小，超过一定的最小值，并且它下面的div中的锚点填充下面的区域，但不影响“leftToolBar”div的宽度。

是否有一些CSS属性的组合，我可以在这里应用（除了硬编码的“最大宽度”数字），会给我那种效果？

Answer 1

<div id="leftToolBar" class="toolbar"> 
 
<div id="canvasHolder"></div> 
 
<div> 
 
     <a class="currentTool"><img src="images/pencil.png"/></a> 
 
     <a><img src="images/paint.png"/></a> 
 
     <a><img src="images/bucketfill.png"/></a> 
 
     <a><img src="images/left.png"/></a> 
 
     <a><img src="images/right.png"/></a> 
 
     <a><img src="images/down.png"/></a> 
 
     <a><img src="images/up.png"/></a> 
 
     <a><img src="images/rotateleft.png"/></a> 
 
     <a><img src="images/rotateright.png"/></a> 
 
     <a><img src="images/dflip1.png"/></a> 
 
     <a><img src="images/dflip2.png"/></a> 
 
     <a><img src="images/vflip.png"/></a> 
 
     <a><img src="images/hflip.png"/></a> 
 
     <a><img src="images/grid.png"/></a> 
 
</div> 
 
</div> 
 
<style> 
 
.toolbar { 
 
\t \t background-color: green; 
 
\t \t width: min-content; 
 
\t \t display: flex; 
 
\t \t flex-wrap: wrap; 
 
} 
 

 
.toolbar a { 
 
     display: inline-block; 
 
     width: 20px; 
 
     height: 20px; 
 
     text-align: center; 
 
     line-height: 24px; 
 
     border-radius: 0.2em; 
 
     padding: 3px; 
 
     border: 1px solid #AAA; 
 
} 
 

 
.toolbar a.currentTool{ 
 
     box-shadow:-1px -1px 1px 1px rgba(0,0,0,0.5) inset, 1px 1px 1px 1px rgba(255, 255, 255, 0.8) inset; 
 
     border: none; 
 
} 
 

 
#canvasHolder { 
 
     background-color: #a0a0a0; 
 
     border: 1px solid #777470; 
 
\t \t width: 100px; 
 
\t \t height: 150px; 
 
} 
 
</style>

这是否完成你在找什么？

Answer 2

不幸的是，没有 - CSS没有父选择器。您可以做的最好是#canvasHolder a min-width和max-width，或者基于百分比的宽度。

您可以使用jQuery来定位它，并使用$("#canvasHolder").parent().css();来操纵父CSS，假设您有权访问jQuery。

Answer 3

不知道这是否是你想要的，但我们来看一看：

.toolbar a { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    line-height: 24px; 
 
    border-radius: 0.2em; 
 
    padding: 3px; 
 
    border: 1px solid #AAA; 
 
} 
 

 
.toolbar a.currentTool { 
 
    box-shadow: -1px -1px 1px 1px rgba(0, 0, 0, 0.5) inset, 1px 1px 1px 1px rgba(255, 255, 255, 0.8) inset; 
 
    border: none; 
 
} 
 

 
#canvasHolder { 
 
    background-color: #a0a0a0; 
 
    border: 1px solid #777470; 
 
} 
 

 
#canvasHolder canvas { 
 
    border: 1px solid #666; 
 
    background: repeating-linear-gradient(45deg, #CCC, #CCC 2px, #CCC 4px, #AAA 6px); 
 
    display: inline-block; 
 
    vertical-align: center; 
 
} 
 

 

 
/** important part **/ 
 

 
.toolbar { 
 
    /*background-color: red;*/ 
 
    width: auto; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
#canvasHolder { 
 
    min-width: 200px; 
 
    height: 100px; 
 
} 
 

 
#canvasHolder + div { 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 100%; 
 
}

<div id="leftToolBar" class="toolbar"> 
 
    <div id="canvasHolder"></div> 
 
    <div> 
 
     <a id="tool_pencil" onclick="setTool('pencil'); return false;" href="#" class="currentTool"><img src="images/pencil.png" /></a> 
 
     <a id="tool_paintbrush" onclick="setTool('paintbrush'); return false;" href="#"><img src="images/paint.png" /></a> 
 
     <a id="tool_floodfill" onclick="setTool('floodfill'); return false;" href="#"><img src="images/bucketfill.png" /></a> 
 
     <a onclick="transform('shiftleft'); return false;" href="#"><img src="images/left.png" /></a> 
 
     <a onclick="transform('shiftright'); return false;" href="#"><img src="images/right.png" /></a> 
 
     <a onclick="transform('shiftdown'); return false;" href="#"><img src="images/down.png" /></a> 
 
     <a onclick="transform('shiftup'); return false;" href="#"><img src="images/up.png" /></a> 
 
     <a onclick="transform('rotleft'); return false;" href="#"><img src="images/rotateleft.png" /></a> 
 
     <a onclick="transform('rotright'); return false;" href="#"><img src="images/rotateright.png" /></a> 
 
     <a onclick="transform('diagonal1'); return false;" href="#"><img src="images/dflip1.png" /></a> 
 
     <a onclick="transform('diagonal2'); return false;" href="#"><img src="images/dflip2.png" /></a> 
 
     <a onclick="transform('vflip'); return false;" href="#"><img src="images/vflip.png" /></a> 
 
     <a onclick="transform('hflip'); return false;" href="#"><img src="images/hflip.png" /></a> 
 
     <a onclick="toggleGrid(); return false;" href="#"><img src="images/grid.png" /></a> 
 
    </div> 
 
</div>

如果我明白你正在尝试做的，与链接DIV应该被删除该流程使#canvasHolder可以确定其父宽度。

为了这个做，我们需要：

• 设置.toolbar宽度自动因此它的宽度由它的第一个孩子确定;
• 设置position: absolute上的链接容器div，所以它被从当前流中移除。同时设置top: 100%，使其始终放在其父项的末尾，width: 100%以使其与#canvasHolder一致;
• 并在#canvasHolder上设置min-width。

您可以更改#canvasHolder的宽度以查看结果。