Question

默认情况下，当用户打开我的页面时，他只能看到带有图像的“ 图像容器” div，而“ 图像按钮”的状态为“ 已选择” ”。

当用户点击“ 视频”按钮时，我选择了“ 视频”按钮，隐藏“ 图像容器”并显示“ 视频容器”。

问题是我的“ 主容器”高度不固定。当用户从视频切换到图像时，后退并强制执行，并且由于图像和视频有时会大小不同，因此我的“ 按钮行”也会上下移动。使经验不一致。

不允许更改“ maincontainer ”的宽度，更改其属性或位置或向此布局添加内容。 我只能更改“ 视频容器”或“ 按钮行”。

我试图使“ 按钮行”具有绝对位置，并赋予其“ bottom：0 ”将其粘贴到父容器的底部。但是它没有用。

有没有解决方法？我可以通过jQuery做到吗？以某种方式捕获 maincontainer 的初始高度。然后，如果用户单击“视频”按钮，则强制 maincontainer 具有与初始页面加载时（选择“图像”按钮时）捕获的高度相同的高度

<div id=“maincontainer”>
    <div>Some data</div>
    <div id = "imagecontainer"> My image is here</div>
    <div id = "videocontainer"> My video is here</div>
    <div id = “button-row”>
        <button id=“imagebutton” class="selected" type="button">Image</button> 
        <button id=“videobutton” type="button">Video</button> 
    </div>
</div>

主要容器的CSS：

#maincontainer{
    position: relative;
    width: 350px;
}

Answer 1

这项工作（未经测试）

class TaskSchedulerTest
{
  private readonly SemaphoreSlim _mutex = new SemaphoreSlim(2);

  public async Task RunAsync()
  {
    var tasks = Enumerable.Range(1, 2).Select(id => DoWorkAsync(id));
    await Task.WhenAll(tasks);
  }

  private async Task DoWorkAsync(int id)
  {
    await _mutex.WaitAsync();
    try
    {
      Console.WriteLine($"Starting Work {id}");
      await HttpClientGetAsync();
      Console.WriteLine($"Finished Work {id}");
    }
    finally
    {
      _mutex.Release();
    }
  }

  async Task HttpClientGetAsync()
  {
    await Task.Delay(2000);
  }
}

使子容器相对于父div固定（高度不固定）

1 个答案: