Question

假设我有两个具有固定位置的块元素，在窗口中看起来像这样：

--------------
|        xxx |
|        xxx |
|            |
|        xxx |
|        xxx |
|            |
--------------

我想要一个元素在悬停时向左扩展，如下所示：

--------------
|        xxx |
|        xxx |
|            |
|     xxxxxx |
|     xxxxxx |
|            |
--------------

但是，现在它向右扩展。这里可以看到工作示例：https://jsfiddle.net/eeuho5vq/2/

任何解决方案都将受到高度赞赏。

Answer 1

在父级上使用display: flex; flex-direction: column; align-items: flex-end;，并将元素与右侧对齐。

	$(".container").each(function(){
		$(this).hover(function(){
			$(this).toggleClass("show");
		})
	})

#wrapper {
  position: fixed;
  right: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.container {
  width: 2em;
  height: 2em;
  background: yellow;
  margin: 1em 0;
}

.container.show {
  width: 4em;
  height: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="container">
    <!--element 1-->
  </div>
  
  <div class="container">
    <!--element 2-->
  </div>
  
</div>

Answer 2

只需将其添加到private void dependency_OnChange(object sender, SqlNotificationEventArgs e) { SqlDependency dependency = sender as SqlDependency; dependancy.OnChange -= dependency_OnChange; if (e.Type == SqlNotificationType.Change) RendezVousHub.sendAgenda(); GetAllRdv(_date, _whsCode); }：

即可

.container

更新了代码段：https://jsfiddle.net/eeuho5vq/3/

如何打开（展开）块元素到左边？

2 个答案: