Question

我的<div>容器中有两个元素：Canvas和Table。我希望这些元素具有固定的位置，并且当窗口大小低于容器的宽度时，应该显示水平滚动条。

当我尝试调整窗口大小时，表格将移至下一行。以下是我的示例代码的链接。这两个元素应该并排放置。

Answer 1

添加以下CSS-

wait.until(ExpectedConditions.presenceOfElementLocated(By.className(uiDatepicker)));
        WebElement calendar = driver.findElement(By.className(uiDatepicker));

        //select month
        Select monthSlt = new Select(calendar.findElement(By.className(uiDatepicker + "-month")));
        monthSlt.selectByValue(month);

        //select year
        Select yearSlt = new Select(calendar.findElement(By.className(uiDatepicker + "-year")));
        yearSlt.selectByValue(year);

        //click on the day
        WebElement calTable = driver.findElement(By.className("ui-datepicker-calendar"));
        calTable.findElement(By.linkText(day)).click();

直接父容器必须设置为溢出-x滚动。并且还必须为其指定最小宽度，以便如果浏览器宽度小于此宽度，它将显示滚动条。

更新的小提琴-http://jsfiddle.net/ashhaq12345/pf2g4158/3/

Answer 2

在画布和表格的直接容器上添加最小宽度。

没关系，但是将表的容器更改为display：block而不是display：inline-block。还添加一个浮点数：左。

在包含浮动元素的容器末尾附加一个<div style="clear:both"></div>，以确保容器具有正确的高度，否则最终在容器上的高度为0px。

修改了您的示例：http://jsfiddle.net/pf2g4158/

<div class="tableAreaWrapperSub" style="min-width: 960px;">
  <canvas id="myChart" width="600" height="400" style="float:left; border:1px solid black; background: #cdcdcd"></canvas>
  <div style="height:400px; display:block; float: left;">
    <table>
      ...
    </table>
  </div>
  <div style="clear:both"></div>
</div>

Answer 3

为画布和表格的父级应用宽度。在这里，我尝试为'.tableAreaWrapperSub'应用958px的宽度，效果很好。应用的宽度应为画布和桌子的宽度加上边距/边距或边界（如果有）的总和。

保持容器固定，并在调整窗口大小时显示水平滚动条

3 个答案: