Question

这是我的css：

＆＃13;

.contain
{
  min-width: 300px;
  background: black;
  height: 200px;
  display: inline-block;
  overflow: auto;
}
.inl1{
  /* margin: 5px 5px 5px 5px; */
  min-width: 300px;
  background: blue;
  width: 400px;
  height: 200px;
}

＆＃13;

<div class=contain>
  <div class=inl1></div>
</div>

<div class=contain>
  <div class=inl1></div>
</div>

＆＃13;

显然，这两个div显示内联，这就是我想要的。

但是，当浏览器调整大小时，div会一个显示在另一个上面（所需的行为），但是一旦我使浏览器窗口小于min-width，我需要显示水平滚动条。这种情况没有发生。

为什么有任何帮助？

编辑：我在这里尝试了这些建议，但是当浏览器的尺寸变小时，它们似乎都会破坏div之间堆叠的理想行为。

我的效果：

在足够宽的浏览器中显示div内联（没有滚动条）;但在狭窄的＃34;浏览器（即移动设备）将div显示在另一个上面，然后添加水平滚动ONCE，每个div不再显示最小宽度。

我认为这有点清楚......

Answer 1

您的外部框与内部框的最小宽度相同，因此两者的至少 300px宽，因此不会出现滚动条。由于外部元素的已定义像素宽度，如果您没有600像素或更多像素，它们将不会彼此相邻堆叠。如果您给外框的宽度可以缩放（使用%或vw）页面宽度，则会神奇地显示您的结果：

.contain {
  width: 45%;
  background: black;
  height: 200px;
  display: inline-block;
  overflow: auto;
}
.inl1{
  /* margin: 5px 5px 5px 5px; */
  min-width: 300px;
  background: blue;
  width: 400px;
  height: 200px;
}
@media all and (max-width:600px){
  .contain {
    width: 100%;
  }
}

<div class=contain>
  <div class=inl1></div>
</div>

<div class=contain>
  <div class=inl1></div>
</div>

（我使用45%，因为我不想在彼此旁边很好地浮动它们，但你可以使用更多的CSS）。您仍然可以为容器添加max-width 300像素，以确保它们不会超过 300px，但仍然会收缩。

Answer 2

你只需要为div设置一个包装器并用

设置它

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>People</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.PEPK)
        <div class="form-group">
            @Html.LabelFor(model => model.PENAME, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PENAME, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PENAME, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PEVORNAME, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PEVORNAME, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PEVORNAME, "", new { @class = "text-danger" })
            </div>
        </div>
    <!-- This was the culprit -->
    </div>
}

这是小提琴：https://jsfiddle.net/1hshzxah/3/

浏览器调整大小时的内联块滚动条

2 个答案: