[英]Multi-column CSS layout with rounded borders
问题:
我正在尝试创建一个多列CSS布局,其边框看起来与此图片一致:
码:
<div style="border-radius:4px; border: 1px solid #ddd;">
<div style="display:block;float:left;width:50%;">
<div><b>Fö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å:</b> '.$level.' ('.$credits.')<br>
<b>Kommentar:</b> '.$row['Comments'].'<br>
<b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser
</div>
</div>
上述代码将产生以下内容:
题:
什么需要修改,以便我可以获得框的水平和垂直线?
您可以将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ö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å:</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>Ö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;
}
您可以并排使用两个列表:
<div style="border-radius:4px; border: 1px solid #ddd;">
<ul style="display:block;float:left;width:50%;">
<li><b>Fö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å:</b> '.$level.' ('.$credits.')</li>
<li><b>Kommentar:</b> '.$row['Comments'].'</li>
<li><b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser</li>
</ul>
</div>
您需要添加一些样式来摆脱列表的默认样式,并将边框添加到li
的顶部,底部和侧面。
这样做的缺点是,你必须给你的li
小号固定高度,所以边界排队。
你必须改变你的市场。 您需要一个或多个表来执行此操作。 我认为表格更容易管理......不知何故,这是一个案例表。 或者你采取bg图像...但我不会推荐这个
检查一下: http : //jsfiddle.net/eNEzs/
这足以纠正你的css和div中的物品。
<div style="border-radius:4px; border: 1px solid #ddd; margin: 20px;">
<div class="block">
<div><b>Fö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å:</b> '.$level.' ('.$credits.')</div>
<div><b>Kommentar:</b> '.$row['Comments'].'</div>
<div><b>Ö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) 。 以上解决方案仅适用于此特定情况。
将每个单元格换行为div
而不是使用br
,并在相应的元素上添加border-left
和border-bottom
。 如果你仍想使用50%
宽度,那么使用box-sizing: border-box;
防止包装。
看看这个jsfiddle的一种方法 ,尽管你应该使用类来正确选择应用不同样式的元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.