html - 如何在同一行上获得 3 列?

标签 html css percentage multiple-columns

我试图在一行中显示三列。它一直有效,直到我向 div 添加了一些填充。我使用百分比来让它有点响应。以下是 CSS:

.contentLine .column {
    float: left;
    margin: 0;
    width: 31%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
}

.contentLine .last {
    margin-right: 0;
}

Here is my fiddle

我的百分比有误吗?

最佳答案

Demo HERE 使用 margin-right:.5%;

.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: .5%;
padding: 1%;
position: inherit;
}

并像这样更改最后一列 div。因为您使用了两次类属性,而您只能在一个标记中使用一次类属性。

使用

<div class="column last">

不是<div class="column" class="last">它很破旧。

关于html - 如何在同一行上获得 3 列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18872190/

相关文章:

javascript - 按钮的 Scrollspy 偏移量

html - div中的可变高度列表项,底部对齐

css - 有什么通用的CSS库吗?

css - 用图标替换剑道按钮

HTML/CSS - 增加字体大小将页面上的所有内容向左移动

java - 涉及数学的方法给出与计算器不同的答案

python - Pandas 计算滚动时间范围内的百分比变化

javascript - 如何扩大这个圆圈以充满过渡的屏幕?

html - flex 容器中的元素不包装

R:通过ID计算2列的商