Question

我试图让两个div彼此相邻并没有间隙但是我似乎无法让它工作。我已将我的代码放入js小提琴中 http://jsfiddle.net/rr4uf/

服务器状态和知识库似乎工作正常但是票证似乎不起作用。

<div class="single docs">

            <div class="section status">

                <h2>Server Status</h2>

                <p>SERVER STATUS WILL GO HERE</p>               
            </div>

            <div class="section kb">

                <h2>Knowledgebase</h2>
                <p>Is your server not listed above?</p>
                <p>Our Knowledgebase contains a wide array of tutorials and general information to help you with the most common issues.</p>

                <a class="button" href="http://www.noouhost.co.uk/clients/knowledgebase.php" title="View Knowledgebase">View Knowledgebase</a>

            </div>

            <div class="section ticket">

                <h2>Support Ticket</h2>
                <p>Cannot find a solution to your problem in our Knowledgebase?</p>
                <p>Submit a ticket to our support team and we will help resolve any issues you're having.</p>

                <a class="button" href="https://www.noouhost.co.uk/clients/submitticket.php" title="Submit Ticket">Submit Ticket</a>

            </div>

        </div>

Answer 1

抱歉，但我没有正确地回答你的问题，你想并排使用这种风格的“section.kb”和“section.ticket”吗？试试这个：

.section.kb {
        width:50%;
        border: 2px solid #e6e6e6;
        border-top:0px;
        background: #fff;
        padding: 20px 20px 20px 20px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-left-radius: 10px;
        display:table-cell;
    }

    .section.ticket {
        width:50%;
        border: 2px solid #e6e6e6;
        border-top:0px;
        background: #fff;
        padding: 20px 20px 20px 20px;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;
        display:table-cell;
    }

我刚将两个div都作为表格单元格

Answer 2

您设置了50％的宽度以及额外的填充和边框 - 这些加起来的总宽度大于50％。通过应用“box-sizing：border-box;”填充物和边框将包含在50％中。例如：

.section.kb {
    width:50%;
    border: 2px solid #e6e6e6;
    border-top:0px;
    background: #fff;
    padding: 20px 20px 20px 20px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;

    display:inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

请注意，您还必须添加-moz-box-sizing，因为Firefox尚未使用前缀实现此功能。否则即使是较旧的IE也能很好地支持它。

我还将“display：inline”更改为“display：inline-block”。

工作示例： http://jsfiddle.net/c4wBW/

Answer 3

您的代码中存在两个问题：

1：显示：内联
2：每个div的宽度

显示内嵌

使用display：inline作为堆叠2个div彼此相邻的方法会产生不可预测的结果。你实际上是在告诉浏览器div必须表现得像单词而不是字母。考虑一下：

AA

A A

您认为自己获得了AA，但实际上，如果您使用的是显示内容，则会在div之间获得额外的空间：内联。这里的解决方案是删除display：inline并使用float：left;代替。

每个div的宽度

按顺序，对于浏览器，使用以下公式计算宽度：

width + padding + border = real width

你真正想要的是这个公式：

width  = real width

要实现此目的，您必须使用以下代码更改div的边框大小：

-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

以下文章解释了这一点：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

在这里，您会找到更新代码：http://jsfiddle.net/rr4uf/4/

Answer 4

请检查demo

你必须在div中使用float并调整它们的宽度。

Answer 5

你需要把display：inline-block;到section.kb并玩宽度和浮动

内联div不起作用

5 个答案: