2

問題：

この画像に沿ったものに見える境界線を持つ複数列の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>

上記のコードは次のようになります。

ここに画像の説明を入力してください

質問：

ボックスに水平線と垂直線を表示できるようにするには、何を変更する必要がありますか？

4

5 に答える 5

5

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/

于 2012-06-15T14:20:48.527 に答える
3

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これの欠点は、境界線が揃うように固定の高さを指定する必要があることです。

于 2012-06-15T13:59:59.113 に答える
1

マークアップを変更する必要があります。これを行うには、テーブルまたはそれ以上のボックスが必要です。テーブルは管理しやすいと思います...そしてどういうわけかこれはテーブルの場合です。またはあなたはbg-imageを撮ります...しかし私はこれをお勧めしません

于 2012-06-15T13:54:59.077 に答える
1

これを確認してください：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）に変更することをお勧めします。上記の解決策は、単にこの特定の例のためのものです。

于 2012-06-15T14:00:13.747 に答える
0

divを使用する代わりに各セルをラップし、適切な要素にとbrを追加します。それでも幅を使用する場合は、を使用して折り返さないようにします。border-leftborder-bottom50%box-sizing: border-box;

これを行う1つの方法については、このjsfiddleを参照してください。ただし、クラスを使用して、さまざまなスタイルを適用する要素を適切に選択する必要があります。

于 2012-06-15T14:05:44.573 に答える