CSS Float设置为右边但向左浮动

Question

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

正如你所看到的那样，推文正好位于照片的旁边，因为我试图让它漂浮到页面的右侧，其间距与左边的照片相同。

twitter feed的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;}

如果您需要任何其他信息，请与我们联系。

谢谢！

Answer 1

这是因为父母有：

display: flex;

删除display: flex，这也解答了为什么float未适用于任何一个孩子的原因。

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