Question

我有这些div，一个漂浮在左边，另一个漂浮在右边，但它们是如此间隔开，我希望它们更近一点，我尝试设置边距，但这不起作用。任何人都可以帮忙

这是css

.right{float:right; margin-left:-200px;}
.left{float:left;}

.date{
width:80px;
margin: 50px 90px 0px 200px;
padding: 0px 0px 0px 0px;
}

.entry {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
    font-family:eurofurence;
    font-size:17px;
    width:610px;
    background:#000;
}

Answer 1

设置

 margin-right:200;

for .right

或者您可以使用

像这样的样式的位置和左或右属性

.left{
  position:relative;
  float:left;
  left:100px;
 }

DEMO

Answer 2

试试这个css：

.left{ float:left;}

.right{float:left; margin-left:200px;}

Answer 3

请注意，当前规格的左/右浮动元素的 vertical 边距存在一个错误：这些垂直边距不会折叠成仅的非浮动元素的垂直边距>在其上方，只有漂浮在其下方的物体。

这是不连贯的...有时，这些垂直边距的行为在浏览器中是不同的（有些会正常崩溃）。

这将使这些浮动元素与旁边的非浮动元素产生不平衡的垂直对齐：

<div style="border:1px solid black;margin:10px">Non-floatting above.</div>
<div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div>
<div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div>
<div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div>
<div style="border:1px solid black;margin:10px;clear:both">Non-floatting below.</div>

您会注意到中间的3个块未对齐：左侧和右侧的浮动块出乎意料地位于中央非浮动块下方10px处...

但是随后下面的代码块（带有“ clear：both”）都可以向下移动（但是此清除操作将忽略之前浮动的底部边距，这些浮动底部边距可以< / em>仍参与以下元素的上边距折叠。

因此，浮动元素的上边距无法按预期工作：无法创建一个deisgn，其中浮动元素会采用正确的顶部边距，如果这些非浮动元素也需要，则与那些仅在其旁边的非浮动元素保持一致相同的边距。

一种解决方法是将中间行中的所有块封装在具有自己的垂直边距的父块中，并且中间必须中的所有块都没有任何垂直边距。然后，如果所有这些浮标都不能排成一行，就会产生问题，有些浮标会“包裹”并且没有任何余量！

然后唯一的解决方法是将所有中心元素封装在没有NO边距的父块内，不参与内容上方或下方的垂直边距的折叠，但是中间的所有元素都需要设置其边距。在这种情况下，无法允许中间行的垂直边距与中间行上方或下方的行的垂直边距正确折叠。

<div style="border:1px solid black;margin:10px">Non-floatting above.</div> <div style="position:relative"> <div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div> <div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div> <div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div> <div style="clear:both"></div> </div> <div style="border:1px solid black;margin:10px">Non-floatting below.</div>

如何设置浮动div的边距？

3 个答案: