在第一个CSS多列的顶部添加了空行



我使用的是CSS列,但似乎有一个问题,即文本的开头在顶部有一个额外的空间,使后面的第二列和第三列看起来比第一列高。

我觉得我已经基本掌握了。我已经尝试删除h2的页边空白底部,但这似乎没有影响列。所以我把h2放在它自己的div中,但这也没有影响它们。奇怪的是,它在DreamWeaver中看起来很好,只是在服务器上直播时不好。在Safari、FireFox和Opera中似乎都是这样。我没有Chrome或IE。

以下是该网站的链接,您可以查看:www.jordanmiller.newbedesign.com/coast/academics.html

下面是与列一起使用的CSS:

h2 {
    font-weight: 300;
    margin-bottom: -.5%;
    font-color: #003;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div.text {
    margin: 2% auto;
    max-width: 900px;
}
div.texthead {
    margin: 0 auto;
}
div.col {
  -webkit-column-count: 3;
  -webkit-column-gap: 1%; /* Saf3, Chrome*/
  -moz-column-count: 3;   
  -moz-column-gap: 1%; /* FF3.5+ */
  column-count: 3;        
  column-gap: 1%; /* Opera 11+*/
  text-align: left;
}

下面是内容的HTML:

<div class="texthead">
<h2>Academics: Not Just Books</h2>
</div>
<div class="text">
<div class="col"><p>Coast Middle School is a community of active learners working in concert for the development of individual success and self-esteem. It employs a comprehensive curriculum that seeks to develop the whole child--intellectually, physically, spiritually, socially, aesthetically, and emotionally. Teachers and students in Coast Middle School hold themselves and each other to the highest expectations. The Middle School academically challenges its students in foreign language, math, social studies, language arts, and science, while at the same nurturing emotional and creative development through our acclaimed fine arts and athletic programs.</p>
<p>Coast Middle School is developmentally responsive to the needs of its students. The Middle School provides the students with teachers and specialized professionals who are readily available to offer the assistance students need in negotiating their lives, both in and out of school. As a complement to their academic classes, students discuss issues relevant to their lives through our comprehensive character education and guidance curriculum. The student-led vestry program allows the students to develop a sense of leadership and responsibility as they aid the chaplain in the development of chapel messages.</p>
<p>Coast Middle School seeks to conceptualize and promote the healthy growth of young adolescents as ethical citizens and increasingly competent, self-sufficient young people who are optimistic about the future. To achieve these goals the Middle School is structured on a team concept. Each grade level is split into two teams--blue and white, representing our school colors--consisting of four academic core classes. Coast Middle School believes academic success and personal growth increase markedly when young adolescents' affective needs are met. Therefore, all adults in the Middle School are advocates, advisors, and mentors for each student. Each team works together on service-learning activities and experiential learning opportunities.</p>
<p>Coast Middle School feels strongly that the most successful learning strategies are ones that involve each student personally. Therefore, we offer after-school tutorials so students can get personalized help with homework or as preparation for a test or quiz. Other after-school possibilities include intramurals, clubs, and an Extended Day Program, which runs until 6:00 p.m. Students are also encouraged to participate on school athletic teams. Students in both grades can participate in drama performances.</p>
<p>Coast Middle School is also actively invested in the impact media and digital activities have on our students’ lives. Students in both grades participate in a Digital Citizenship curriculum provided by Common Sense Media, which encourages them to be safe, responsible, and savvy citizens of the digital world.</p>
<p><strong>Seventh Grade:</strong> While enjoying a similar daily schedule in seventh grade, the students make a choice from four languages (Chinese, French, Latin, or Spanish) for daily study. Additionally they choose one elective (see course descriptions). The seventh grade takes a class trip to Washington, D.C. Each of the three sports seasons includes at least one no-cut sport.</p>
<p><strong>Eighth Grade:</strong> The daily class schedule includes civics, physical science, algebra or geometry, and English. Interdisciplinary activities include Mock Congress and a social issues research project. All classes emphasize critical and creative thinking. The focus of this grade is leadership training and service learning, as well as preparation to move successfully into the Upper School. The eighth grade travels to New York City in the spring.</p>
<p>Students in both grades have a morning fruit break and break for a brief recess to socialize and develop friendships that are vital in the development of a young adolescent. Band, chorus, and orchestra are offered in bith grades, along with visual and theater arts opportunities.</p>
</div>

我认为将其添加到css中可以解决问题:

div.col p{
    margin-top:0px;
}

最新更新