浮动权在CSS中不起作用

我在CSS中创建了一个浮动权的示例。但是，我在元素之间的顺序和空间方面存在问题。这是结果：浮动权在CSS中不起作用

的灰点应该是，甚至在绿点一个右侧。

有没有想法？谢谢，

这是我的代码示例：https://jsfiddle.net/dalenguyen/mfj78LL5/

.green-dot { 
 
    color: #20b08f; 
 
} 
 
.gray-dot { 
 
    color: grey; 
 
} 
 
.professional-skills .green-dot, 
 
.professional-skills .gray-dot { 
 
    float: right; 
 
    font-size: 1.5rem; 
 
}

<div class="professional-skills"> 
 
    <h2>Professional Skills</h2> 
 
    <p>Web Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p> 
 
    <p>Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot">&#x25cf; &#x25cf;</span></p> 
 
</div> 
 
</div>

来源

2017-05-01 Dale Nguyen

的CSS属性float从来没有设计建筑布局。

它被设计用于围绕图像环绕文本。

因为CSS没有提供更好的布局系统，浮点数（以及表格，内联块和绝对定位）已被用作hack解决方法。

但现在CSS3 flex和grid模块有wide browser support，它们是专门为建筑布局而设计的，所以应该考虑使用它们。

section { 
 
    display: flex; 
 
} 
 

 
section > * { 
 
    margin: 0; 
 
    align-self: center; /* 1 */ 
 
} 
 

 
section > p { 
 
    margin-right: auto; /* 2 */ 
 
} 
 

 
.green-dot { 
 
    color: #20b08f; 
 
    font-size: 1.5rem; 
 
} 
 

 
.gray-dot { 
 
    color: grey; 
 
    font-size: 1.5rem; 
 
}

<article class="professional-skills"> 
 

 
    <h2>Professional Skills</h2> 
 

 
    <section> 
 
    <p>Web Design</p> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    </section> 
 

 
    <section> 
 
    <p>Design</p> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    </section> 
 

 
</article>

注：

了解align-self物业位置：
- How does flex-wrap work with align-self, align-items and align-content?
这里了解auto边距：
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

来源

2017-05-01 13:55:11

您可以更新如下：

.professional-skills .green-dot, .professional-skills .gray-dot 
{ 
    float: right; 
    font-size: 1.5rem; 
    padding-right:5px; 
}

，它会工作，但它更好地保持每圈在一个特别的DIV中。

来源

2017-05-01 13:50:27

感谢@Mhd Jarkas。这是一个快速解决方案。 –

当使用float:right;时，最远的元素始终是HTML代码之前的元素。如果你想让你的灰点适合你的绿点，你必须首先在你的HTML中插入它们。另外，如前所述，您可能希望将自己的点分成不同的容器，这样您就可以完全控制间距（而不是在点之间使用空格）。见Mhd.Jarkas的回答。

希望它有帮助！

来源

2017-05-01 13:54:13

是的，它的确如此。我在这里得到了很多解决方案。 –

试试这个

.green-dot,.green-dot-1 { 
 
    color: #20b08f; 
 
} 
 
.gray-dot,.gray-dot-1 { 
 
    color: grey; 
 
} 
 

 
.professional-skills .green-dot, .professional-skills .gray-dot{ 
 
    float: right; 
 
    font-size: 1.5rem; 
 
} 
 
#dots{ 
 
font-size: 1.5rem; 
 
float : right; 
 
} 
 
#abc{ 
 
float: left; 
 
} 
 
#clear { 
 
clear: both; 
 
} 
 
.green-dot-1{ 
 
padding-right: 5px; 
 
}

<div class="professional-skills"> 
 
    <h2>Professional Skills</h2> 
 
    <p>Web Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p> 
 
    <p id="abc">Design </p> 
 
<div id="dots"> 
 
    <span class="green-dot-1">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot-1">&#x25cf; &#x25cf;</span> 
 
    </div> 
 
    <div id="clear"></div> 
 
</div> 
 
</div>

来源

2017-05-01 13:54:30 Nimish

感谢@Nimish对你的帮助。 –

不均匀间隔由float: right;引起的，在你的例子有第二排的2个跨度比较只有1个跨度在第一行，并浮动删除标签之间的空白渲染。

您可以将每个点包裹到一个跨度中，这将修复间距问题，并注意浮动引起的颠倒顺序。

.green-dot { 
 
    color: #20b08f; 
 
} 
 

 
.gray-dot { 
 
    color: gray; 
 
} 
 

 
.professional-skills .green-dot, 
 
.professional-skills .gray-dot { 
 
    float: right; 
 
    font-size: 1.5rem; 
 
    margin-left: 5px; 
 
    margin-top: -5px; 
 
}

<div class="professional-skills"> 
 
    <h2>Professional Skills</h2> 
 
    <p> 
 
    Web Design 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    </p> 
 
    <p> 
 
    Design 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    </p> 
 
</div>

来源

2017-05-01 14:02:38 Stickers

您的解决方案也适用。谢谢@Pangloss。 –

浮动权在CSS中不起作用

回答

相关问题