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

Question

Problem:

I am trying to create a multi-column CSS layout with borders that look something in line with this picture:

Code:

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

The above-mentioned code will produce the following:

Question:

What needs to be modified so I can get the horizontal and vertical lines to the box?

Answer 1

You can modify the CSS to look like this:

.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;
}​

Then have your markup look like this:

<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: The formatting will break if you put a space between the span s on an individual line, so don't break them; otherwise, take this solution and work out something that doesn't break =) ​

You can see a working example at http://jsfiddle.net/saluce/XhnBE/

EDIT: It seems that mPDF doesn't like inline-block , so change this part of your CSS:

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

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

Answer 2

You could use two lists side by side:

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

You'll need to add some styles to get rid of the default styles for lists and add you borders to the top, bottom and sides of your li s .

A down side of this is that you'll have to give your li s fixed heights so the borders line up.

Answer 3

You have to change your marke-up. You need a table or more boxes to do this. I think tables would be easier to manage... and somehow this is a case tables are for. Or you take a bg-image... but I won't recommend this

Answer 4

Check this: http://jsfiddle.net/eNEzs/

It's enough to correct your css a little bit and wrapp items in div's.

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

But I would recommend you to simply change elements to a table or list (ul or ol) . Above solution is simply for this particular exmaple.

Answer 5

Wrap each cell in a div instead of using br , and add border-left and border-bottom on the appropriate element. If you still want to use 50% width, then use box-sizing: border-box; to keep it from wrapping.

See this jsfiddle for one way to do it , though you should use classes to properly select which elements to apply the different styles to.