CSS Float设置为向右但向左浮动[重复]答案

【问题标题】：CSS Float set to right but floating left [duplicate]CSS Float设置为向右但向左浮动[重复]
【发布时间】：2017-04-18 14:49:48
【问题描述】：

在这个页面上：http://sneakersinsight.com/xml/adidas-nmd_xr1

如您所见，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;}

左边照片的css是这样的：

.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;}

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

谢谢！

【问题讨论】：

根据计算，它没有任何浮点数。诡异的。你检查了.preview-twitter 的计算值吗？
@PraveenKumar 我没想到，但是是的，你是对的，这真的很奇怪。有什么想法可能导致这种情况吗？
谜团解开了。重新加载页面并找到答案。

标签： html css css-float

【解决方案1】：

这是因为父母有：

display: flex;

删除display: flex，这也解释了为什么float 没有应用于任何一个孩子。

您需要在.preview-wrapper 的两个区域中删除flex。两者都在http://sneakersinsight.com/css/styles.css在线262。出于某种原因，它不是两个，而是您的样式表被加载了两次。请也检查一下。

【讨论】：