0

私は長い間、一般的なプログラミングから離れていました。最も単純なことを忘れる方法は驚くべきことです。だから私はレジュームジェネレーターを作ることで私のウェブデザイン/PHPをウォームアップしようとしています. Word で履歴書を作成しましたが、ドキュメントの書式を模倣したいと考えています。

テーブルでこれを試してみましたが、思ったように機能しなかったため、それをかき集めました。現在は、div と span を使用しています。

しかし、それはフォーマットをさらに壊しているので、何をすべきかわかりません...

私の主な問題は、Microsoft Word のタブと同じように、他のものと同じ行にスペースを正確に並べることです。

これが私が使用しているコードです

function fieldFill($fieldL, $fieldR = 'NoneAtAll'){
$numOfSpaces = 50;
echo '<div class="left">' . $fieldL . '</div>';

//if ($fieldR != 'NoneAtAll'){
//    for($i = 0; $i <= $numOfSpaces - strlen($fieldL); $i++){
//        echo '&nbsp';
//        //echo $i;
if ($fieldR != 'NoneAtAll'){
        for($i = 0; $i <= $numOfSpaces; $i++){
            echo '&nbsp';
        }
    echo '<span class="rightt">' . $fieldR . '</span>';
    echo '<br></br>';
    }
}

そして、ここにCSSセクションがあります

<style>
    .rightt {margin: 0 0 0 300px;}
    .name { font-size: 22pt;}
    .sections {
        padding: 15px 0px 0px 0px;
        font-size: 12pt;
        font-weight: bold;
        text-decoration: underline;
        }
    .years {
        font-size: 12pt;
        font-weight: bold;
        /*white-space:pre*/
        }
    .jobtits {
        font-size: 12pt;
        font-weight: bold;
    }
    </style>

優れた履歴書ジェネレーターが既に存在することは知っていますが、これは練習のために行っています。ありがとう

ほら、この形を真似したい

ここに画像の説明を入力

今日の時点で、このコードは

<div id="page-container">
            <div id="leftside">
                <div class="name">Name</div>
                Address
                <br>
                City
                <br>
                State

                <div class="sections">Objective</div>
                To do good stuff!
                <div class="sections">Education</div>
                A college    
                <div class="sections">Awards</div>
                Did some good stuff
                <div class="sections">Job Experience</div>
                <div class="jobtits">Some place</div>
                Was an editor
                <div class="jobtits">Another place</div>
                Did stuff there too.
                <div class="sections">Skills</div>
            </div>
            <div id="rightside">
                <div class="name">That's my name</div>
                Mobile: 334-223-3244
                <br>
                Home: 334-223-3244
                <br>
                Email: Email@me.com

                <div class="sections">Filler</div>
                Filler
                <div class="sections">Filler</div>
                2012-1030    
                <div class="sections">Filler</div>
                Filler
                <div class="sections">Job Experience</div>
                <div class="jobtits">Jul 00 - 32</div>
                Filler
                <div class="jobtits">Everybody's heard</div>
                About the bird.
                <div class="sections">Skills</div>
            </div>
        </div>

ほとんどの部分で機能していますが、目標ラインなど、まだ重複する必要がある部分があります。おそらく、そのために新しいdiv/tableを作成する必要がありますか？動的にする前に、html 静的を見ていきます。

4

1 に答える 1

0

SPAN タグはインライン要素であるため、マージンは適用されません。代わりに DIV タグを使用してください。

于 2013-02-03T07:57:08.283 に答える