-1

我正在为我的投资组合建立一个简历页面。我之前问过如何制作两列的无序列表并想通了，谢谢。

但是现在当我添加下一部分“教育”并列出我的学位时，文本与无序列表的最后几行重叠，我不知道为什么。

另外，我设置了一个名为 margin 的 div id，带有凹槽边框，但它只围绕页面的一部分。就像它创建了一个对于文本来说太小的框。

如果这是新手，请原谅我，但毕竟我是新手！任何帮助，将不胜感激。

这是我的html：

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="mystyle.css">
        <type="text/css">

        <meta name="author" content="Michelle Lawson">
         <!--   author: Michelle Lawson
                CIS 116, Exit Portfolio, Summer 2013 -->

       <meta name="keywords" content="exit portfolio, Summer 2013, Edmonds Community College">
       <meta name="description" content="exit portfolio">
       <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <meta name="robots" content="NOINDEX, NOFOLLOW">

        <title>Resume</title>
    </head>
<body>
<div class="margin">


<header>
    <img src="../graphics/jpg/keys.jpg" alt="Code">
    <div class="nameTitle"><h3>Michelle Lawson<br>
    Web Application Developer</h3></div>
</header>

<nav> 
            <a href="template.html">Home</a> |
            <a href="resume.html">Resume</a> |
            <a href="interests.html">Interests</a> |
            <a href="coursework.html">Coursework</a> |
            <a href="../cases/cases.html">Cases</a> |

</nav>          

<div id="pageTitle"><h3>Resume</h3></div>


  <h4>Technical Expertise</h4>                          
    <div id="wrap">
        <div class="left">  <ul><li>HTML</li>
                                <li>XHTML</li>
                                <li>CSS</li>
                                <li>SQL</li>
                                <li>AD Administration</li>
                                <li>Lotus Notes Administration</li>
                            </ul>
        </div>  

        <div class="right"><ul><li>XML</li>
                            <li>JavaScript</li>
                            <li>PHP</li>
                            <li>SQL</li>
                            <li>Networking</li>
                            <li>End User Training</li>
                            <li>SDLC</li>
                        </ul>
        </div>  
    </div>         
<br>

<div id="edccdegree"><h3>Education</h3><br>
Associate of Technical Arts, Web Application Development<br>
</div> 

<footer>

            <h4>Contact Information:<br>
            Michelle Lawson<br>
            michelle.lawson00@gmail.com</h4>
</footer>     
</div>       
</body>

</html>

这是我的CSS：

 @charset "utf-8";
/* CSS Document */
.margin {
margin-top:15px;
margin-bottom:15px;
margin-right:15px;
margin-left:15px;
padding:5px;
border: groove #000000 20px;

        }

/*p { font-family: "Book Antiqua"; font-size: 80%;}*/

h1 { color:black; background-color: transparent; font-family: "Book Antiqua"; font-size:300%; }
h2 { text-align:center; color: black; background-color: transparent; font-family:"Times New Roman", Times, serif; font-size:200%; }
h3 { color: black; background-color: transparent; font-family: "Times New Roman", Times, serif; font-size:150%; }
h4 { color: black; background-color: transparent; font-family: "Times New Roman", Times, serif; font-size:100%; }

#wrap   {
    width:485px;
        }


.left   {
    width:240px;
    /*background-color:*/
    height:123px;
    float:left;
        }

.right {
width:240px;
    /*background-color:#00d;*/
    height:123px;
    float:right;

        }

.image {
    float:left;
        }

//*.section {
    width:80%; 
    float:right;
        }
*/
.nameTitle {  
    width:80%; 
    float:right;
            }


.nav        {

    font-family:"Book Antiqua";
    font-size: 5em;
            }


#edccDegree {
    font-weight:bold;
            }

/*nav   {
            list-style-type:circle;
            width:125px;
            background-color: #abc;
            text-align: center;
            border-bottom: 2px solid black;
}

nav a {
            text-decoration: none;
            display:block;
)

nav a:hover {   background-color: brown




/*.links { font-family: "Trebuchet MS"; color:olive; background-color: transparent; font-size: 80%; }

    blockquote strong { color: purple; background-color: transparent; } 
    .trip { color: navy; background-color: transparent; }

    #b1 {text-align:right; font-family: Trebuchet MS; font-size: 80%;}*/
4

3 回答 3

0

You need to add overflow: hidden; to your #wrap block, to properly contain the two uls you are floating.

#wrap {
  ...
  overflow: hidden;
}

Remove the height from your .left and .right classes. If you want to constrain the height, do it to the #wrap block.

Codepen sketch.

于 2013-08-23T02:27:13.653 回答
0

将 edccdegree div 的显示更改为 inline-block。

#edccdegree
{
    display: inline-block;
}

见http://jsfiddle.net/r4ke5/1/

于 2013-08-23T02:16:50.830 回答
0

您应该margin-bottom在CSS.left和.rightCSS 中添加。例如：

.left,
.right {
    margin-bottom: 30px;
}

jsFiddle 示例。

您也可以添加margin-top到 Education 标题；但是，这只会针对一个标题修复它，而上述解决方案将适用于使用您可能希望稍后在页面中实现的.left或类的任何未来列表。.right

附带说明：
在您的 mainHTML中，您有<img src="../graphics/jpg/keys.jpg" alt="Code">很多<br>'s。通常最好用/类似这样的关闭 img 和 br 标签：<img src="../graphics/jpg/keys.jpg" alt="Code"/>和<br/>.

于 2013-08-23T02:32:25.380 回答