Benutzer können die Breite nebeneinander liegender Divs anpassen, indem sie sie ziehen
P粉690200856
P粉690200856 2023-08-28 17:28:25
0
1
415
<p>Ich habe zwei Divs nebeneinander. Wenn es eine einfache Lösung gibt, erlauben Sie dem Benutzer, die Breite beider Divs durch Ziehen zu ändern. </p> <p>Wenn die Breite eines Divs zunimmt, verringert sich die Breite des anderen Divs, wobei die Summe der Breiten der beiden Divs unverändert bleibt. </p> <p>Es wäre großartig, wenn es mit reinem Javascript oder CSS implementiert werden könnte. Fühlen Sie sich frei, weitere Elemente wie Divs hinzuzufügen. </p> <p>Die Codes für die beiden Divs lauten wie folgt: </p> <pre class="brush:php;toolbar:false;">.left { schweben: links; Breite: 49 %; Mindesthöhe: 50 Pixel; Rand: 2px gestrichelt #f0f } .Rechts { schweben rechts; Breite: 49 %; Mindesthöhe: 50 Pixel; Rand: 2px gestrichelt #00f }</pre> <pre class="brush:php;toolbar:false;"><div class="right"></div> <div class="left"></div></pre> <p>Vielen Dank für alle Ideen! </p>
P粉690200856
P粉690200856

Antworte allen(1)
P粉020085599

出于好奇,我创建了一个小试验,并发现使用一个主要的弹性盒容器 .wrapper 来包含 .left.right 元素,并让 弹性盒机制 完成艰巨的工作更容易实现。

两件事:

  • 当使用 resize 时,属性 overflow 需要设置为 auto 以使 手柄 可见(在 Windows Firefox 和 Chrome/Edge 上测试通过)。
  • 选择一个可以调整大小并拥有 手柄 的子元素,我选择了 .left。因为它们是弹性盒子的子元素,所以在另一个元素上使用 flex: 1.right)时,弹性盒机制 将使该元素跟随调整大小的元素的大小,并填充任何剩余空间。

MDN 参考:resize

/* 用于轻松调整 .right 大小的弹性盒容器 */
.wrapper { display: flex }

.left, .right {
    /* 初始大小,浏览器将记住上次状态直到页面重新加载 */
    width: 50%;
    min-height: 50px; /* 至少要有一些内容显示 */
    min-width : 50px;
}

.left {
    overflow: auto; /* 必须使手柄可见 */
    resize: both;   /* 启用双向调整大小 */
           /* 在单个方向上使用 horizontal/vertical */
}

.right {
    flex: 1; /* 将填充剩余的水平/垂直空间 */
}

/* 美化 */
.left  { border: 2px dashed #f0f }
.right { border: 2px dashed #00f }
<div class="wrapper">
    <div class="left" ></div>
    <div class="right"></div>
</div>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!