css - 带有圆形边框的多列 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>

警告：如果您span在单独的行上的 s 之间放置一个空格，格式会中断，所以不要中断它们；否则，请采用此解决方案并找出不会破坏的东西=）​</p>

您可以在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>

您需要添加一些样式以摆脱列表的默认样式，并将边框添加到lis 的顶部、底部和侧面。

不利的一面是，您必须提供lis 固定高度，以便边界对齐。

Answer 3

你必须改变你的标记。您需要一张桌子或更多盒子来执行此操作。我认为表格会更容易管理......而且不知何故，这是表格的用途。或者你拍一张背景图……但我不推荐这个

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

将每个单元格包裹在 adiv而不是 using 中，并在适当的元素上br添加border-leftand 。border-bottom如果您仍想使用50%宽度，请使用box-sizing: border-box;以防止其换行。

请参阅此 jsfiddle 以了解一种方法，尽管您应该使用类来正确选择要应用不同样式的元素。