Question

我有一些我无法改变的HTML，但我可以根据需要更改CSS。我需要做这些：

两列宽度相等的
介于2em
他们必须采取所有剩余的宽度（父宽度 - 2em）
框内需要填充

HTML：

<div class="parent">
    <a href="/page1" class="box">
        <img class="pic" src="/images/image1.png">
        <div class="description">the description</div>
    </a>
    <a href="/page2" class="box">
        <img class="pic" src="/images/image2.png">
        <div class="description">the description</div>
    </a>
</div>

我能够在它们之间没有任何间距的情况下执行：box-sizing: border-box;但是如果我添加一个右边距，则它们不再适合。

Answer 1

尝试一下：它使用了css中的Calc()函数。

注意：边框会略微抛出计算，因此您必须稍微调整一下计算结果。我这样做是为了向你展示如何布置盒子。

.parent {
    position: relative;
    width: 600px;
    height: 300px;
    border: 1px solid red;
}

.box {
    border: 1px solid black;
    width: calc(50% - 1.25em);
    display: inline-block;
}

.box:first-child {
    margin-right: 2em;
}

<强> Fiddle

Answer 2

我能够解决它：

.parent .box
{
    position: relative;
    width: 50%;
    margin: 0em;
    padding: 1em;
    float: left;
    font-size: 1em;
    overflow: hidden;
    z-index: 0;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
}

.parent .box:nth-child(odd)
{
    border-right: solid 1em #ffffff;
}

.parent .box:nth-child(even)
{
    border-left: solid 1em #ffffff;
}

第n个孩子让我在它们之间添加间距

如何使这个html两列宽度相等，中间有一个边距？

2 个答案: