CSS 定位宽度答案

【问题标题】：CSS positioning widthCSS 定位宽度
【发布时间】：2014-11-25 22:56:26
【问题描述】：

我正在与想要调整大小的定位元素作斗争。

我有一个具有绝对位置的元素。在里面我正在制作三个 div，.left、.center、.right。我希望能够调整在 .left、.right 上拖动的元素的大小，这将缩小元素。（我不包括 JS 来拖动，到目前为止它是无关紧要的 - 你可以在控制台中增加/减少元素的宽度）。

问题：我的问题是元素似乎没有在 div 内对齐 - .center 和 .right 的内容被向下推。如果我让它们浮动，则在调整元素大小时会出现相同的行为。而且因为我要调整 .holder 元素的宽度，我无法控制 .center 元素的宽度，所以从技术上讲，它应该只是缩小以适应宽度减去 .left 和 .right 的宽度。

我为这个问题做了这个jsfiddle。

编辑：更新、合并 .holder 和 .second 为 .second

编辑：我没说清楚，但高度不能超过 60 像素。

编辑：可以隐藏居中的文字，如果元素宽度超小，我不关心文字。

编辑：感谢所有参与的人！每个人都靠近桌子的位置。我以前没用过。

选择这个：jsfiddle.net/abhitalks/c5L6tLt0/25 和http://jsfiddle.net/abhitalks/1o3vbhhp/ fiddles 作为我需要的，我还要进一步找到如何将其缩小到 .left 和 .right 并将高度保持在 60 像素，但是这些2 非常接近我想要的。

再次感谢大家！

html:

<body>
    <div class="first">
        <div class="second">
            <div class="left"></div>
            <div class="center">Should be center</div>
            <div class="right"></div>
        </div>
    </div>    
</body>

css:

.first {
    position: relative;
    border: solid 1px green;
     width: 600px;
    height: 600px;
}

.second {
    position: absolute;
    border: solid 1px red;

    left: 100px;
     top: 10px;
}

.left, .right, .center {
    height: 60px;
}

.left, .right {
    min-width: 1px;
    width: 5px;
    max-width: 5px;
    background-color: skyblue;
}

【问题讨论】：

标签： html css css-float css-position

【解决方案1】：

您可以在容器上使用display: table，在.left, .center, .rightdivs 上使用display: table-cell 来适应。

将width:100% 提供给.center 将导致拉伸到可用空间。改变宽度很容易。

在下面的示例 sn-p 中，您可以尝试通过单击.left（减小）或.right（增大）来更改宽度。

你更新的小提琴：http://jsfiddle.net/abhitalks/c5L6tLt0/22/

代码片段：

$(".right").on("click", function () {
    $(this).parent().css("width", "+=10px");
});
$(".left").on("click", function () {
    $(this).parent().css("width", "-=10px");
});

.first {
    position: relative;
    border: solid 1px green;
    width: 400px; height: 240px;
}
.second {
    position: absolute;
    border: solid 1px red;
    left: 100px; top: 10px;
    width: 120px; height: 60px;
    display: table; transition: all 250ms;
}
.left, .right, .center {
    display: table-cell;
    height: 100%;
    overflow: hidden; text-align: center; vertical-align: middle;
    word-wrap: break-word; word-break: break-all;  
}
.left, .right {
    min-width: 5px; width: 5px; max-width: 5px;
    background-color: skyblue; cursor: pointer;
}
.center { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="first">
        <div class="second holder">
            <div class="left" title="Click to shrink"></div>
            <div class="center">Center</div>
            <div class="right" title="Click to grow"></div>
        </div>
    </div>
</body>

如果您想删除高度限制并使其根据内容增长或缩小，那么只需从所有divs 中删除高度即可。

看到这个小提琴：http://jsfiddle.net/abhitalks/1o3vbhhp/

如果您希望在更改div 宽度时隐藏或滚动内容，那么table-cell 将不允许这样做。您必须包装一个内部 div 才能做到这一点。

拨弄内部 div 滚动：http://jsfiddle.net/abhitalks/c5L6tLt0/23/

隐藏内容并固定高度：http://jsfiddle.net/abhitalks/c5L6tLt0/24/

或者，如果您对分词感到满意以允许较小的大小最多为 1 个字符：

摆弄分词：http://jsfiddle.net/abhitalks/c5L6tLt0/25/

【讨论】：

这很好，但我需要进一步缩小它 - 这不知何故不允许我这样做。正如我所说的，如果文本溢出并变成......或空白也没关系
更新了答案。只需添加包装样式。
这样更好，但高度固定为 60 像素...我可以完全溢出文本并保持相同的高度吗？
用自动高度的新小提琴更新了答案。
是的，它会强制降低内容。我需要它保持在 60 像素，仅此而已。

【解决方案2】：

从您的 CSS 中删除以下部分

.holder {
    width: 100px;
    height: 60px;
}

你为什么要在同一个 div 上应用两个类？

更新

这是可能对您有用的更新代码。将您的 Div 视为表格。它非常轻巧且功能强大。

.first {
 display: table;
  border: solid 1px green;
}

.second {
    display: table-row;
    border: solid 1px red;

    left: 100px;
     top: 10px;
}


.left, .right, .center {
     display:table-cell;
}

.left, .right {
    min-width: 1px;
    width: 5px;
    max-width: 5px;
    background-color: skyblue;
}

【讨论】：

我申请只是为了说明它是一个“持有人”，我可以将两者合并。如果我删除它，.left 在左侧，但 .right 不是右侧，并且 .center 仍然被向下推
检查我评论中的更新代码。只需在您的 JSFIDDLE 中更新此 css 即可试用
别忘了我有绝对/相对定位

【解决方案3】：

您希望它们显示为表格单元格吗？

.holder {
    width: 300px;
    height: 90px;
    display: table;
}

.left, .right, .center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

http://jsfiddle.net/c5L6tLt0/20/

【讨论】：

【解决方案4】：

如@Adnan 所说，删除以下 .holder CSS 并添加以下内容

.left .right .center {
      max-width: 200px;
      overflow: auto;
 }

当您的内容超过 200 x 60 尺寸时，overflow 属性将添加滚动条。

【讨论】：

它让我最终得到了这个：jsfiddle.net/gogromat/c5L6tLt0/26 但同样的问题 - 内容下降了，是的......
这个jsfiddle.net/gogromat/oug49f6y 更接近我的需要，但是在缩小时完全隐藏 .center 会很棒