Question

问题：

我正在尝试创建一个多列CSS布局，其边框看起来与此图片一致：

enter image description here

代码：

<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>

上述代码将产生以下内容：

enter image description here

问题：

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

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之间放置一个空格，格式将会中断，所以不要破坏它们;否则，采取这个解决方案并找出一些不会破坏的东西=）

您可以在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;以防止它被包裹。

See this jsfiddle for one way to do it，尽管您应该使用类来正确选择要应用不同样式的元素。

具有圆形边框的多列CSS布局

5 个答案: