Question

我有一个关于负利润的问题。我一直在阅读这本关于网页设计的书，其中有一个通过使用浮点数和负边距来改变源顺序的例子，但是当我尝试做同样的事情时它似乎没有正常工作。

所以给出了这个HTML＆amp; CSS代码，如何仅使用浮点数和正/负边距交换div1和div2的位置？我知道还有很多其他方法，但这件事困扰着我，我想弄清楚。

.div1和.div2都应保持浮动：左;

＆＃13;

body {
 background: #222; 
}

h1 {
 text-align: center;
 border-bottom: 1px solid navy;
}


.wrapper {
 width: 960px;
 margin: 0 auto;
 outline: 2px dashed yellow;
 
}

.footer {
 clear: both;
 background: black; 
 color: white;
 text-align: center;
}

.div1, .div2 {
 float: left;
 background: orange;
}

.div1 {
 width: 480px;
}

.div2 {
 width: 480px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
 <div class="div1">
  <h1>Heading 1</h1>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
 </div>
 
 <div class="div2">
     <h1>Heading 2</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
 </div>
 
<!--
 <div class="div3">
    <h1>Heading 3</h1>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
</div>
-->
<div class="footer">Footer</div>
  </div>
</body>
</html>

＆＃13;

Answer 1

在这种情况下，您可以切换div's甚至没有（负）边距

更改此

.div1, .div2 {
    float: left;
    background: orange;
 }

要

.div1, .div2 {
    background: orange;
 }

添加你的花车

.div1 {
   float: right;
   width: 480px;
}

.div2 {
    float: left;
    width: 480px;
 }

元素水平浮动，这意味着元素只能向左或向右浮动，而不能向上或向下浮动。

浮动元素将尽可能向左或向右移动。通常这意味着一直到包含元素的左侧或右侧。

http://www.w3schools.com/css/css_float.asp

编辑
如果你想让两个div都向左浮动你就可以使用它。我不推荐它，因为它可以在brwosers中变得非常混乱

.div1, .div2 {
   float: left;
   background: orange;
   position:relative;
}

.div1 {
  width: 480px;
  margin-left:480px
}

.div2 {
   width: 480px;
   margin-left:480px
   z-index:999;
   margin-top:-335px; 
}

Answer 2

这样做：

.div1, .div2 {
 float: left;
 background: orange; /* Kill this float to avoid conflict */
}

.div1 {
 width: 480px;
 /* Float to the position you want by adding float property and value */
}

.div2 {
 width: 480px;
/* Float to the position you want by adding float property and value */
}

现在你有类似的东西

.div1, .div2 {
 background: orange;
}

.div1 {
 width: 480px;
 float: right;
}

.div2 {
 width: 480px;
 foat: left:
}

注意：除非需要重叠，否则不要使用负边距值来定位元素。负值边距可能导致给定位置的重叠。

负边距和来源订单

2 个答案: