如何通過一個子元素影響元素的寬度，但不使用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的寬度以查看結果。