Question

我正在与我希望能够调整大小的定位元素作斗争。

我有一个绝对位置的元素。我正在制作三个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/小提琴作为我需要的东西，我还要进一步找到如何将它缩小到.left和.right并保持高度为60pixels，但这两个非常接近我所寻找的。

再次感谢大家！

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

Answer 1

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

Answer 2

您可以使用容器上的display: table和display: table-cell .left, .center, .right上的div来适应。

给width:100% .center会导致延伸到可用空间。改变宽度很容易。

在下面的示例代码段中，您可以点击.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>

如果您想删除高度限制并使其按内容增长或缩小，只需从所有div中删除高度。

看到这个小提琴：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/

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

Answer 4

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

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

当您的内容超过200 x 60维度时，

overflow属性将添加滚动条。

CSS定位宽度

4 个答案: