2

我有这些 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;
}
4

3 回答 3

2

放

 margin-right:200;

为 .right

或者你可以使用

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

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

演示

于 2012-10-02T05:44:27.027 回答
1

试试这个CSS：

.left{ float:left;}

.right{float:left; margin-left:200px;}
于 2012-10-02T06:51:25.783 回答
0

请注意，当前规范中的左/右浮动元素及其垂直边距存在一个错误：这些垂直边距不会折叠到它们上方的非浮动元素的垂直边距中，只有那些浮动在它们下方的元素。

它是不连贯的......有时这些垂直边距的行为在浏览器中是不一样的（有些会正常折叠）。

这会创建这些浮动元素与旁边的非浮动元素的不平衡垂直对齐：

<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”）可能会向下移动（但是这种清除将忽略之前浮动的底部边距，这些浮动底部边距可能仍然参与到下面元素的顶部边距的折叠中。

所以浮动的上边距没有按预期工作：不可能创建一个设计，其中浮动将采用正确的上边距，如果这些非浮动元素也需要相同的边距，则与设计为就在它们旁边的非浮动元素保持一致.

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

唯一的解决方法是将所有中心元素封装在没有边距的父块内，不参与垂直边距的折叠，内容高于或低于它们，但是中间的所有元素都需要设置它们的边距。在这种情况下，无法正确折叠中央行的垂直边距，而行的垂直边距正好位于中间行的上方或下方。

<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>
于 2020-11-18T00:32:40.030 回答