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

这当然不是我想要的。我想要＆＃34; canvasHolder＆＃34; div确定超出某个最小值的工具栏的大小，并为它下面的div中的锚点填充下面的区域，但不影响＆＃34; leftToolBar＆＃34;的宽度。格。

我可以在这里应用CSS属性的某些组合（除了硬编码＆＃34; max-width＆＃34;数字）会给我这种效果吗？

Answer 1

＆＃13;

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

＆＃13;

这是否能实现您的目标？

Answer 2

不幸的是，没有 - CSS没有父选择器。您可以做的最好的事情是#canvasHolder 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宽度设置为auto，使其宽度由其第一个子项确定;
在链接容器div上设置position: absolute，以便从当前流中删除它。同时设置top: 100%以使其始终位于其父级width: 100%的末尾，以使其延伸#canvasHolder;
并在min-width上设置#canvasHolder。

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

如何通过一个子元素影响元素的宽度，而不是使用CSS影响其他元素

3 个答案: