css - 内联div不起作用

Question

我试图让两个 div 彼此对齐，没有间隙，但我似乎无法让它工作。我已将我的代码放入 js fiddle 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都做成了table-cell