Question

我正在尝试创建一个看起来像这样的div“模式”：

然而，目前它看起来更像是这样：

导致我的网页看起来像这样：

在最后一段中，一切都被推到了右边。理想情况下，我需要将组件放在中心位置。 Get Conditions按钮也应位于Print Runs文本框下方，因为它们都位于同一个div中，并且位于两个上部div下方的中心位置。下拉列表和radiobutton列表都应该是它们的位置。

我玩弄浮动底部div，但我尝试的各种事情主要导致较低的div占用两个上部div之间的更多空间。

我已将HTML和CSS粘贴到JSFiddle中，请记住它不识别ASP工具，因此无法准确预览我想要实现的目标。

https://jsfiddle.net/h4tr31gt/1/

Answer 1

这并不直接解决您的浮动问题，但您可以通过使用flexbox获得相同的结果。 https://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

＆＃13;

iframe

＆＃13;

.container {
  background-color: lightblue;
  height: 400px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.block-top {
  width: 50%;
  background-color: yellow;
  height: 50%;
  border: 1px solid black;
  box-sizing: border-box;
}

＆＃13;

Answer 2

向父div添加一类clearfix，如下所示：

<div class="clearfix"> </div>

然后将以下样式添加到您的css：

.clearfix {
    clear: both;
}

然后，您可以在使用浮动的任何其他地方重复使用它。

https://jsfiddle.net/c3rLqce7/

Answer 3

正如DaniP建议清除花车将解决您的问题。 float属性的作用是从实际页面流中删除元素，并根据右/左浮点值对齐它。因此，当您尝试在浮动元素之后添加其他元素时，它将占用页面，就好像浮动元素不存在一样。这就是为什么你看到它向上移动的原因。此外，浮动下一个元素而不清除前面的元素浮点数将具有与没有浮点数相同的结果。因此，您需要使用clear：both / right / left清除浮动，以便清除浮动元素的周围并且可以对齐元素。您可以查看有关浮点数/清除修正的更多信息，因为有些新事物会不时出现。你可能会发现它更清楚。

创建一个CSS程序集，浮动div左，右和底

3 个答案: