Wie man die Breite eines Elements durch ein untergeordnetes Element, aber nicht andere mit CSS beeinflusst

Question

Wie der Titel beschreibt, möchte ich ein CSS finden, um die Breite eines Elements auf die Breite seines Elternelements zu bringen, aber andere Kinder dieses Elternteils zu zwingen innerhalb dieser Breite.

Hier ist der Code ist Ich verwende:

<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> 

Und hier ist die entsprechende CSS (bisher):

.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; 
    } 

Dies natürlich tut nicht, was ich will. Ich möchte, dass das "canvasHolder" -Div die Größe dieser Symbolleiste über ein bestimmtes Minimum hinaus festlegt und die Anker im darunterliegenden div den darunter liegenden Bereich auffüllt, ohne jedoch die Breite des "leftToolBar" -div zu beeinflussen.

Gibt es eine Kombination von CSS-Attributen, die ich hier anwenden kann (abgesehen von einer hartcodierten "max-width" -Nummer), die mir diesen Effekt geben wird?

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>

Hat erreichen dies, was Sie suchen?

Answer 2

Leider nein - CSS hat keinen Elternselektor. Das Beste, was Sie tun können, ist #canvasHolder eine min-width und max-width oder eine prozentuale Breite.

Sie könnten mit jQuery auf das Ziel zugreifen und das übergeordnete CSS über diesen Code bearbeiten, indem Sie $("#canvasHolder").parent().css(); verwenden, vorausgesetzt, Sie haben Zugriff auf jQuery.

Answer 3

Nicht sicher, ob dies ist, was Sie wollen, aber werfen Sie einen Blick:

.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>

Wenn ich verstanden, was Sie versuchen von zu tun, sollte die div mit den Links werden entfernt der Fluss, so dass #canvasHolder seine Elternbreite bestimmen kann.

Dazu werden wir brauchen getan:

• Set .toolbar Breite auf Auto, so dass ihre Breite durch sein erstes Kind bestimmt wird;
• Set position: absolute auf den Links Container div, so dass es aus dem aktuellen Fluss entfernt wird. Stellen Sie auch top: 100% so ein, dass es immer am Ende seiner Eltern platziert wird und width: 100%, um es mit #canvasHolder zu dehnen;
• Und setzen Sie eine min-width auf #canvasHolder.

Sie können die Breite von #canvasHolder ändern, um die Ergebnisse zu sehen.