Question

我有一个Web应用程序，其中包含一个实现为可调整大小的div的简单弹出菜单。

应用程序必须同时支持LTR和RTL语言。

使用LTR语言（例如英语）时，调整大小的小指示出现在div的右下角，并且在拖动时，div随鼠标移动而扩展。

将应用程序与RTL语言一起使用时，小标记会按预期显示在div的左下角。

问题在于，当拖动该角（再次是左下角）时，移动的是右下角。

div部署在absolute位置。

如何解决此问题并使div在LTR和RTL中表现为镜像？

Answer 1

如果div在页面的左侧对齐，则除了向右扩展外，它什么也不能做。如果设置了float: right，则可以拖动手柄并将其向左扩展。

我在这里插入了一个工作示例：

div {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: both;
    overflow: auto;
    direction: rtl;
    float: right;
}

<html>
<head>

</head>
<body>
<h1>Resizing LTR text.</h1>

<div>
<p>Drag the handle to the left and the div will expand to the left..</p>
</div>

</body>
</html>

可调整大小的DIV向错误的方向扩展

1 个答案: