格式标签HTML PHP CSS

Question

I've been away from programming in general for a long time. Amazing how you forget the simplest things. So I'm trying to warm-up my web design/PHP by making a resume generator. I made my resume in Word, and I want to try to mimic the document formatting.

I tried doing this with tables, and then I scraped that because it wasn't working exactly like I wanted, and now I'm using divs and spans.

But that's breaking the formatting even more so I don't know what to do...

My main problem is getting spaces to line up precisely the way tabs do in Microsoft Word, on the same line as other things.

Here is the code I'm using

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

And here is the CSS section

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

I know there's already good resume generators out there but I'm doing this for the practice. Thanks

Here we go, I want to mimic this format

As of today I'm finding that this code

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

is working for the most part, but there are still parts that need to overlap, such as the objective line. I probably need to make a new div/table for that huh? I'm walking through the html static before making it dynamic.

Answer 1

SPAN标签是内联元素，因此边距不会被覆盖，请改用DIV标签。