html - CSS Float 设置为向右但向左浮动

标签 html css css-float

<分区>

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

如您所见,Twitter 提要紧挨着照片,我正试图让它 float 到页面右侧,间距与照片左侧的间距相同。

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

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

谢谢!

最佳答案

这是因为 parent 有:

display: flex;

删除 display: flex,这也回答了为什么 float 没有应用于两个 child 。

preview

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

关于html - CSS Float 设置为向右但向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40953447/

相关文章:

javascript - 附加到包含的 js/css 文件的数字是什么?

php - 需要帮助在 codeigniter 中配置 CSS 模板

Javascript - setInterval、动画、延迟

css - 如何在价格表中垂直对齐

CSS 2列布局,从上到下 float

javascript - float 到左侧的可滚动 div 仍然包裹在其兄弟下方

Javascript 有时会在 HTML 中加载内容,除非元素悬停在检查中

javascript - 为什么我的onkeydown函数只能使用一次?

html - 在div中设置宽度元素

javascript - 从 Soundcloud 嵌入的动态音频 &lt;iframe&gt;