2

也许是今天最不寻常的问题标题！

我正在尝试在我的网站上实现一些我遇到了难以置信的困难的事情，并希望有人可以向我展示我的方式的错误，或者建议我是否以完全错误的方式处理这个问题。

考虑以下：

1-----------------------------------------------------------------------+
|2--------+ 3---------------------+ 4-------------+                     |
||        | |                     | |             |                     |
|| a-+    | | b-+ c-+ d-+ e-+ f-+ | | g-+ h-+ i-+ |                     |
|| | |    | | | | | | | | | | | | | | | | | | | | |                     |
|| +-+    | | +-+ +-+ +-+ +-+ +-+ | | +-+ +-+ +-+ |                     |
||        | |                     | |             |                     |
|+--------+ +---------------------+ +-------------+                     |
+-----------------------------------------------------------------------+

|<--------------- SCREEN WIDTH --------------->|

根据与我想要的布局相关的数字和字母，这是我想要实现的目标：

1 = 一个“容器”，高度固定，不比屏幕宽度宽（给或取边距等，使其适合屏幕中心）。

这个“容器”还需要一个水平滚动条，以便用户可以滚动它的内容。

在这个容器中还有另外 3 个容器，分别标记为 2、3 和 4。它们的大小会有所不同，但从不包含滚动条，但是每个容器随着它的增长，都需要保留在容器 1 中并且从不垂直滚动。

在 2、3 和 4 中，可以插入额外的容器（小部件），从而使其父容器增长。

正如您在我的布局中看到的，容器 2 有“小部件”a，容器 3 有小部件 b、c、d、e 和 f，容器 4 有小部件 g、h 和 i。

添加我管理的所有内容的 jQuery/Javascript 没有问题，但实际的 CSS 和“布局”我遇到了问题。

我已经制作了容器 1，'white-space:nowrap;'因此这消除了垂直滚动，并且使用类似于 的 jQuery$('#containerA').append([something]);还将“小部件”添加到相应的容器（2、3 或 4）中。

目前我的HTML如下：

                    <div id="divfieldWidgets" style="width:auto;margin-top:40px;background-color:#FFFFFF;border:1px solid gray;height:320px;left:50px;right:50px;-moz-box-shadow: 4px 4px 2px #888;-webkit-box-shadow: 4px 4px 2px #888;box-shadow: 4px 4px 2px #888;overflow:hidden;margin-left:60px;margin-right:60px;overflow:scroll;">
                    <div style="white-space:nowrap;float:left;">
                        <div id="divFieldWidgetsProductAndMarketing" style="background-color:#FFEEEE;height:100%;width:auto;white-space:nowrap"></div>
                        <div id="divFieldWidgetsYears" style="background-color:#EEFFEE;height:100%;width:auto;white-space:nowrap"></div>
                        <div id="divFieldWidgetsCalculations" style="background-color:#EEEEFF;height:100%;"></div>
                    </div>
                </div>

这在某些部分实现了我想要的（即，仅当添加“小部件”时，主容器的水平滚动以及容器 2、3 和 4 的大小），但正如您所看到的，并非全部在一起。

真的很感激这方面的一些帮助。

TIA

4

3 回答 3

1

如果您希望您的float:leftdiv 水平增长并避免垂直滚动，则需要将您的 div 包裹divs在一个具有固定水平宽度的更大 div 中，即

您可以通过以下步骤接近您想要实现的目标：

  • 使您的容器 1 具有非常高的宽度。您可以通过静态指定宽度或计算内部 div 的宽度并通过 javascript 将其分配给它来做到这一点

  • 现在，您的内部 div 即 2,3,4 将是width:autoand float:left, (4 也可以float:right)

  • 现在，您的内部 div 将具有您想要水平对齐的 div，即容器 3 中的 b、c、d、e、f：您希望它们水平对齐，因此您必须给 3 一个静态宽度，以及这些 b、c、d、e、fawidth:auto

  • 现在，由于您不知道应该为 2,3 和 4 赋予什么宽度，因此您必须通过 javascript 计算每个 div 内部的单个 div 的宽度并将总和分配给它们。IE

    width(3) = width(b) + width(c) + width(d) + width(e) + 30px =（比内容 div 的实际总和多一点）

所以，基本点是，对于水平对齐和没有垂直滚动，父容器应该有固定的宽度。

现在看到这个小提琴，我已经为容器提供了静态宽度。你已经通过javascript代码得到了。

另外，看看溢出属性。经历这个和这个

于 2013-03-13T12:33:48.007 回答
-2

我认为父 div 应该是 100%，子 div 应该向左浮动。保持溢出滚动水平，但不允许垂直滚动。

于 2013-03-13T12:06:09.163 回答
-2

如果我正确理解了您想要的行为，您可以在不设置静态宽度的情况下执行此操作并保留您对水平滚动的渴望。

http://codepen.io/cimmanon/pen/HCKEx

#divfieldWidgets {
  max-width: 100%; /* modified */
  margin-top:40px;
  background-color:#FFFFFF;
  border:1px solid gray;
  height:320px;
  -moz-box-shadow: 4px 4px 2px #888;
  -webkit-box-shadow: 4px 4px 2px #888;
  box-shadow: 4px 4px 2px #888;
  overflow:hidden;
  margin-left:60px;
  margin-right:60px;
  overflow-x:scroll; /* modified */
}

.grouper {
  display: table-cell;
}

.grouper div {
  display: table-cell;
}

#divFieldWidgetsProductAndMarketing {
  background-color:#FFEEEE;
}

#divFieldWidgetsYears {
  background-color:#EEFFEE;
}

#divFieldWidgetsCalculations {
  background-color:#EEEEFF;
}

的HTML：

<div id="divfieldWidgets">
    <div class="grouper"><!-- added a class here -->
        <div id="divFieldWidgetsProductAndMarketing">a</div>
        <div id="divFieldWidgetsYears">b</div>
        <div id="divFieldWidgetsCalculations">c</div>
    </div>

  <div class="grouper">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
  </div>
</div>

关键是使用display: table-cell. 您的元素被迫连续出现，并且它们的父容器会增长以包含它们。

于 2013-03-13T15:39:14.447 回答