当前位置: 动力学知识库 > 问答 > 编程问答 >

html - how to affect an element's width by one child element but not others using CSS

问题描述:

As the title describes, I would like find a CSS means of making one element's width affect its parent element's width, but force other children of that parent to fit within that width.

Here's the code I'm using:

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

And here is the relevant css (thus far):

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

}

This of course is not doing what I want. I would like the "canvasHolder" div to determine the size of that toolbar beyond a certain minimum, and for the anchors in the div below it to populate the area below, but without affecting the width of the "leftToolBar" div.

Is there some combination of CSS attributes I can apply here (aside from a hard-coded "max-width" number) that will give me that effect?

网友答案:

<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 {background-color: green;width: min-content;display: flex;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;width: 100px;height: 150px;
}
</style>
网友答案:

Unfortunately, no -- CSS does not have a parent selector. The best you can do is give #canvasHolder a min-width and max-width, or a percentage-based width.

You could target it with jQuery, and manipulate the parent CSS through there, using $("#canvasHolder").parent().css();, assuming you have access to jQuery.

网友答案:

Not sure if this is what you want, but take a look:

.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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: