Question

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

但是现在当我添加下一部分，即“教育”并列出我的学位时，文本重叠了无序列表的最后几行，我无法弄清楚原因。

另外，我设置了一个名为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%;}*/

Answer 1

将edccdegree div的显示更改为内联块。

#edccdegree
{
    display: inline-block;
}

请参阅http://jsfiddle.net/r4ke5/1/

Answer 2

您需要将overflow: hidden;添加到#wrap块，以正确包含您正在浮动的两个ul。

#wrap {
  ...
  overflow: hidden;
}

从.left和.right课程中删除高度。如果要约束高度，请执行#wrap块。

Codepen sketch.

Answer 3

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

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

jsFiddle example.

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

旁注：
在您的主HTML中，您有<img src="../graphics/jpg/keys.jpg" alt="Code">和许多<br>。通常最好使用/关闭img和br标签，例如：<img src="../graphics/jpg/keys.jpg" alt="Code"/>和<br/>。

当我用css设置样式时文本重叠

3 个答案: