Html CSS浮动设置为右，但浮动为左

在本页上：

正如你所看到的，twitter提要就在照片的旁边，我正试图让它以与照片左侧相同的间距浮动到页面的右侧

twitter提要的css如下所示：

.preview-twitter {
margin: 0;
padding: 0;
position: relative;
float: right;
right:0;
margin-top: 5%;
margin-bottom: 3%;
width: 40%;
padding-top: 1%;
padding-bottom: 1.38%;
display: inline-block;
background: #373737;}

.item-preview {
position: relative;
margin-top: 5%;
margin-bottom: 3%;
left: 4%;
width: 40%;  
border: 10px solid #373737;
border-width: -moz-calc(50% - 10px);
border-width: -webkit-calc(50% - 10px);
border-width: calc(50% - 10px);
display: inline-block;
padding: 0;}

左图的css如下所示：

.preview-twitter {
margin: 0;
padding: 0;
position: relative;
float: right;
right:0;
margin-top: 5%;
margin-bottom: 3%;
width: 40%;
padding-top: 1%;
padding-bottom: 1.38%;
display: inline-block;
background: #373737;}

.item-preview {
position: relative;
margin-top: 5%;
margin-bottom: 3%;
left: 4%;
width: 40%;  
border: 10px solid #373737;
border-width: -moz-calc(50% - 10px);
border-width: -webkit-calc(50% - 10px);
border-width: calc(50% - 10px);
display: inline-block;
padding: 0;}

它们都包含在一个div中，其中css是：

.preview-wrapper {
display: flex;
position: relative;
overflow: auto;
max-height: 42vw;
min-height: 42vw;}

如果您需要任何其他信息来帮助，请告诉我

---

谢谢

这是因为父母有：

display: flex;

移除

display:flex

，这也回答了为什么

float

未应用于两个子项的原因

---

您需要删除

.preview wrapper

的两个区域中的

flex

。两者都在

http://sneakersinsight.com/css/styles.css

在线

262

。出于某种原因，它不是两个，但是您的样式表被加载了两次。请检查一下。

根据计算，它没有任何浮动。奇怪的你查过

.preview twitter

的计算值了吗？@PraveenKumar我没想到，但你是对的，这真的很奇怪。知道是什么原因吗？谜团解开了。重新加载页面并找到答案。