Question

我使用CSS列，但似乎有一个问题，即文本的开头在顶部有一个额外的空格，使后续的第二和第三列显得高于第一列。

我以为我的一切都非常基本。我已经尝试删除h2的margin-bottom，但这似乎不会影响列。所以我把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>

Answer 1

我认为将此添加到您的CSS可以解决问题：

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

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

1 个答案: