具有圓形邊框的多列CSS布局

Question

問題：

我正在嘗試創建一個多列CSS布局，其邊框看起來與此圖片一致：

碼：

<div style="border-radius:4px; border: 1px solid #ddd;">

        <div style="display:block;float:left;width:50%;">
            <div><b>F&ouml;rfattare:</b> '.$authors.'<br></div>
            <b>Handledare:</b> '.$row['Supervisor'].'<br>
            <b>Examinator:</b> '.$row['Examiner'].'<br>
            <b>Design av studie:</b> '.$design.'
        </div>

        <div style="display:block;float:left;width:50%;">
            <b>Examinationsdatum:</b> '.$row['ExaminationDate'].'<br>
            <b>Niv&aring;:</b> '.$level.' ('.$credits.')<br>
            <b>Kommentar:</b> '.$row['Comments'].'<br>
            <b>&Ouml;vrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser
        </div>

</div>

上述代碼將產生以下內容：

題：

什么需要修改，以便我可以獲得框的水平和垂直線？

Answer 1

您可以將CSS修改為如下所示：

.row {
    border: 1px solid #ddd;
    margin-bottom: -1px;
}

.left {
    display: inline-block;
    width: 50%;
    border-right: 1px solid #ddd;
}

.right {
    display: inline-block;
    width: 49%;
    border-left: 1px solid #ddd;
    margin-left: -1px;
}

.top {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.outerBox {
    margin: 10px;
}​

然后讓你的標記看起來像這樣：

<div class="outerBox">
    <div class="row top">
        <span class="left"><b>F&ouml;rfattare:</b> '.$authors.'</span><span class="right"><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</span>
    </div>
    <div class="row">
        <span class="left"><b>Handledare:</b> '.$row['Supervisor'].'</span><span class="right"><b>Niv&aring;:</b> '.$level.' ('.$credits.')</span>
    </div>
    <div class="row">
        <span class="left"><b>Examinator:</b> '.$row['Examiner'].'</span><span class="right"><b>Kommentar:</b> '.$row['Comments'].'</span>
    </div>
    <div class="row bottom">
        <span class="left"><b>Design av studie:</b> '.$design.'</span><span class="right"><b>&Ouml;vrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser</span>
    </div>
</div>

CAVEAT：如果你在單獨一行的span s之間放置一個空格，格式化就會中斷，所以不要破壞它們; 否則，采取這個解決方案，並找出一些不會破壞的東西=）

您可以在http://jsfiddle.net/saluce/XhnBE/上看到一個工作示例

編輯：似乎mPDF不喜歡inline-block ，所以改變你的這部分CSS：

.left {
    display: block;
    float: left;
    width: 50%;
    border-right: 1px solid #ddd;
}

http://jsfiddle.net/saluce/XhnBE/1/

Answer 2

您可以並排使用兩個列表：

<div style="border-radius:4px; border: 1px solid #ddd;">

    <ul style="display:block;float:left;width:50%;">
        <li><b>F&ouml;rfattare:</b> '.$authors.'</li>
        <li><b>Handledare:</b> '.$row['Supervisor'].'</li>
        <li><b>Examinator:</b> '.$row['Examiner'].'</li>
        <li><b>Design av studie:</b> '.$design.'</li>
    </ul>

    <ul style="display:block;float:left;width:50%;">
        <li><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</li>
        <li><b>Niv&aring;:</b> '.$level.' ('.$credits.')</li>
        <li><b>Kommentar:</b> '.$row['Comments'].'</li>
        <li><b>&Ouml;vrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser</li>
    </ul>

</div>

您需要添加一些樣式來擺脫列表的默認樣式，並將邊框添加到li的頂部，底部和側面。

這樣做的缺點是，你必須給你的li小號固定高度，所以邊界排隊。

Answer 3

你必須改變你的市場。 您需要一個或多個表來執行此操作。 我認為表格更容易管理......不知何故，這是一個案例表。 或者你采取bg圖像...但我不會推薦這個

Answer 4

檢查一下： http ： //jsfiddle.net/eNEzs/

這足以糾正你的css和div中的物品。

<div style="border-radius:4px; border: 1px solid #ddd; margin: 20px;">

        <div class="block">
            <div><b>F&ouml;rfattare:</b> '.$authors.'</div>
            <div><b>Handledare:</b> '.$row['Supervisor'].'</div>
            <div><b>Examinator:</b> '.$row['Examiner'].'</div>
            <div><b>Design av studie:</b> '.$design.'</div>
        </div>

        <div class="block">
            <div><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</div>
            <div><b>Niv&aring;:</b> '.$level.' ('.$credits.')</div>
            <div><b>Kommentar:</b> '.$row['Comments'].'</div>
            <div><b>&Ouml;vrigt:</b> '.$row['Participants'].</div>
        </div>
    <div style="clear:both"></div>        
</div>​

CSS

.block {
     display:block;
     float:left;
     width:50%; 
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
.block:first-child {
     border-right: 1px solid #ddd;
 }
.block div {
     border-bottom: 1px solid #ddd;
 }
.block div:last-child {
     border-bottom: 0px;
}

但我建議你只需將元素更改為表格或列表（ul或ol） 。 以上解決方案僅適用於此特定情況。

Answer 5

將每個單元格換行為div而不是使用br ，並在相應的元素上添加border-left和border-bottom 。 如果你仍想使用50%寬度，那么使用box-sizing: border-box; 防止包裝。

看看這個jsfiddle的一種方法 ，盡管你應該使用類來正確選擇應用不同樣式的元素。