html - 如何在父

中平均分配相同大小的

转载 作者：行者123 更新时间：2023-11-28 10:40:08 27 4

这是我当前的 HTML:

<div style="height:50px; width:1200px">

    <div tabindex="0" class="banner" onclick="location.href='Home.html'">
        Link1
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 1.html'">             
        Link2
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 2.html'">
        Link3
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 3.html'">
        Link4
    </div>

</div>

还有我当前的 CSS:

.banner {
    background: orange;
    color: aqua;
    float: left;
    width: 24%;
    height: 50px;
    vertical-align: top;
    border: 1px solid #000000;
    text-align: center;
    font-family: Garamond;
    font-size: x-large;
    display: table-cell;
    vertical-align: middle;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
}

如何使用 css 将孤立对象设置为沿父对象等距分布？我已将每个孤儿设置为父级的 24%，当它们设置为 25% 时，最右边的落在下方(我推测是由于边框占用了额外的空间)。当缩小时，我使用的是父级的百分比，最右边的部分落在下方，但这是网页中唯一因缩放而改变的部分。我尝试将孤儿的边距设置为自动，但这没有用，并且更改 float 导致它们的宽度减小。

更新:我意识到我应该要求父级两端的两个 s 位于它的最后，而内部的两个 s 在剩余间隙中等距。

修正:这是孤儿的边框增加了宽度。我选择去掉边框，因为无论如何网页看起来更好。

最佳答案

CSS 代码:

 .banner {
        background: orange;
        color: aqua;
        box-sizing: border-box;/*Added New Style*/
        float: left;
        width: 25%;
        height: 50px;
        vertical-align: top;
        border: 1px solid #000000;
        text-align: center;
        font-family: Garamond;
        font-size: x-large;
        display: table-cell;
        vertical-align: middle;
        line-height:50px;
        cursor:pointer;
        font-weight:bold;
    }

您的横幅有 1px 边框，这就是不合适的原因。

DEMO

关于html - 如何在父 <div> 中平均分配相同大小的 <divs？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23172047/

27 4 0

文章推荐： html - 当前位置:absolute 制造困惑的网格流

文章推荐： javascript - Angular 2在没有覆盖ngform时检查有效性

文章推荐： javascript - 为什么我的 javascript 函数会导致 rangeError？

文章推荐： css - 使用伪元素重新设计无序列表

• MySQL查询总和结果除以行数(平均)

  我在 MySQL 中有以下数据，我想求和(总计)然后除以行数。 例子: 我想对 AcctSessionTime 列中的所有数字求和并将其除以项目数，所以在我们的例子中 6+4+3+31=44 将它们除

• SQL 平均(计数(*))？

  我试图找出一个值在列中出现的平均次数，根据另一列对其进行分组，然后对其进行计算。 我有 3 张 table ，有点像这样 DVD ID | NAME 1 | 1 2 | 1 3

• C 编程 - 平均

  好吧，我完全被困在这里，如果这给你们带来任何不便，我深表歉意，但我需要你们的帮助。 我目前正在自学 C，并且从昨天开始慢慢地达到目标。所以我想给自己一个任务，让用户输入 3 个数字，程序必须找到这三个

• java - 数组 - 平均

  我在使用 subAverage 类时遇到困难。当我使用 main 方法时，它似乎无法正常运行。基本上，subAverage 对数组中包含开始索引和结束索引的项进行平均。但是，当我运行它时，我得到了 3

• Python numpy 平均

  像这样平均一个表不是问题 table = [[1,2,3,0],[1,2,3,0],[1,2,3,4]] 你可以 print numpy.average(table,axis=0) 但是如果我有不均匀

• JavaScript 平均 while 循环

  问题 -开发一个类平均脚本，每次运行时都会处理任意数量的结果。提示用户输入每个结果，直到他/她输入 -1。 (哨兵)确定类(class)平均值并将其写入页面。如果未输入结果(第一个输入为 -1)，则显

• javascript - 对两个数组的值进行分组(平均)

  我有 2 个包含以下数据的数组: Array1 = [A, A, A, A, B, B, B, C, C, C, C, C]; Array2 = [4, 2, 4, 6, 3, 9, 6, 5,

• Python:从文本文件导入列表并根据多列进行排序/平均

  我有一个如下所示的文本文件: Mike 5 7 9 Terry 3 7 4 Ste 8 2 3 我写了下面的程序 从文本文件中检索数据 将文本分成由空格分隔的列 将每个名字后面的分数按顺序排序(最低在

• python - 平均-Python

  我试图找到范围内数字的平均值(即找到 1-1000 范围内所有数字的平均值)。我编写了以下代码来执行此操作，但由于 if 语句，在运行时，代码会生成多个数字。然后我尝试使用 while-loop 代替

• Python最长/平均 'losing'以字符串中的二进制数字序列运行

  我有一系列事件。 1 是好的，0 是坏的。寻找寻找 1 个序列的最大、最小和平均长度的最 Pythonic 方式。 例如: seq ="00100000000000110100100000000011

• C# Linq 平均

  我有一个包含类似于以下数据的表格: Group TimePoint Value 1 0 1 1 0 2

• python - 对对象列表的属性求和/平均

  假设我有一个类 C，它具有属性 a。 从 Python 中的 C 列表中获取 a 总和的最佳方法是什么？ 我已经尝试了以下代码，但我知道这不是正确的做法: for c in c_list: t

• r - 合并(平均)具有部分匹配标题名称的列

  我有一个看起来像的数据: AAA_1 AAA_2 AAA_3 BBB_1 BBB_2 BBB_3 CCC 1 1 1 1 2 2

• qt - 平均 QRgb 值

  对于分色算法，我需要对 std::vector 中的颜色值 (QRgb) 进行平均。 您建议如何做？分别对 3 个分量求和然后取平均值？不然呢？ 最佳答案 自 QRgb只是一个 ARGB 格式的 32

• mean - 关于(平均)平均精度的困惑

  在this问题中，我要求对精度调用曲线进行澄清。 特别是，我问我们是否必须考虑一定数量的排名才能画出曲线，还是我们可以合理地选择自己。根据answer，第二个是正确的。 但是，现在我对平均精度(AP)

• networking - 平均 UDP 数据包丢失和数据包重新排序

  我想在 UDP 数据包丢失(或丢失)问题上获得其他 SO'ers 的经验。 最初我的理解是，给定直接点对点连接，其中网卡通过交叉电缆连接，网卡上有充足的缓冲区并及时处理所述缓冲区，“应该”没有数据包丢

• r - 统计效率低下( block 平均)

  我有一系列数据，这些数据是通过分子动力学模拟获得的，因此在时间上是连续的，并且在某种程度上是相关的。我可以将平均值计算为数据的平均值，我想估计与以这种方式计算的平均值相关的误差。 根据 this bo

• excel - 平均 If 函数 - 排除零？

  我正在使用以下averageIf公式 =AVERAGEIF('Backend Data - Aerospace'!D:D, "Total",'Backend Data - Aerospace'!E:E

• sql - 平均 sal 然后按降序排序

  我想列出所有收入超过平均工资的员工。我对此有点迷茫。我需要将所有薪水加起来然后取平均，只显示收入高于平均水平的薪水。在这方面我需要很多帮助。 我的查询不起作用 SQL> select empno,

• audio - 平均 voip 压缩率？

  我正在运行一些音频压缩测试并尝试 Skype's Silk .在他们的测试应用程序中，我看到压缩率为 94%。这似乎很高，这是 Silk 的典型比率吗？这与其他音频压缩编解码器有可比性吗？ 最佳答案