Question

在下面的HTML中，当actionBar类有一个float（只有左边或右边）时，布局才有效，但是，如果我删除它，封闭的div会在整个页面上拉伸并弄乱布局。我真的希望这个“结构”能够集中在我的页面上。目前使用actionBar类中指定的“float”，它可以左对齐或右对齐。有人可以向我解释为什么会这样做（“全部混乱 - 没有浮动”部分）？

当然，作为一个相对的HTML新手，如果你有其他一些很好的方式来实现相同的布局，那总是受欢迎的。目前，我只是在寻找解释，所以我可以尝试找到解决方案。

注意：丑陋的绿色，蓝色和红色只是为了说明。真正的HTML使用图像为基本上是按钮集合提供圆角类型效果。

谢谢！

<html>
<head>
<style>
.actionButtonLeft {
  padding: 0; margin: 0; margin-right: 1;
  float : left;
  width : 8px; height : 26px;
  background-color: green;
}
.actionButton {
  padding: 0; margin: 0; margin-right: 1;
  background-color : blue; color : #ffffff ;        
  height : 26px;
  float : left; 
}
.actionButtonRight {
  padding: 0; margin: 0;
  float : left;
  width : 8px; height : 26px;
  background-color: green;
}
.actionBar {
  float:left; /* or float: right; -- doesn't work with no float */
  background-color:#112554;
  border: 2px solid red;
}
</style>
</head>
<body>
<div class="actionBar">
<div class="actionButtonLeft" ></div>
<input type="button" value="OK" name="OK" id="okButton" class="actionButton"
       style="WIDTH:100px; " onclick="doSomething();">
<input type="button" value="Cancel" name="Cancel" id="cancelButton" 
       class="actionButton"
       style="WIDTH: 100px" onclick="cancelThis();">
<input type="button" value="Help" name="Help" id="helpButton" 
       class="actionButton"
       style="WIDTH: 100px" onclick="helpMe();">
<div class="actionButtonRight"></div>
<div style="width:0px;clear:right;"></div></div>
</body>
</html>

Answer 1

这是因为浮动元素不再拉伸其包含元素。由于actionBar div中的元素是浮动的，因此没有float属性的actionBar div不再具有定义其高度的任何内容。默认情况下，Div占用整个可用宽度，在您的情况下会导致其他元素伸出的宽，薄盒子。添加float属性会导致actionBar div伸展以包含水平和垂直内容。

以下是一些解释float属性及其工作原理的文章：

Containing Floats
怪癖模式：CSS - Clearing Floats
CSS Float Theory: Things You Should Know

Answer 2

删除浮动并在actionBar样式类上添加宽度应该可以做到 - 看起来宽约327px（删除边框时可能会改变）。

如果我将其向左或向右浮动，则div的布局有效，否则无效

2 个答案: