Question

以下是显示问题的JSFiddle。

列的宽度均为48％（因为我设置了填充）。我在Chrome中使用了Inspect Element来查看边框，它们应该都很合适。

我试图浮动每一列但由于某种原因它与造型混乱。

这是代码排列不正确的特定部分：

<div id="main">
      <div id="leftColumn">
        <h1>Education</h1>
        <h3 class="small">The best preparation is a two-year associate degree in an applied science (AAS) program designed to prepare students for a career in chemical technology.
         College offers an associate of applied science for chemical technology. This degree requires completion of a minimum of 62 credit hours.
          College prepares students with skills necessary to go immediately into the workforce. </h3>
        <br>
        <h2 class="thick">Example of Classes for AAS in<br>
          Chemical Technology</h2>
        <table>
          <tr>
            <th>Course</th>
            <th>Class</th>
            <th>Credits</th>
          </tr>
          <tr>
            <td>BIO 101</td>
            <td>Cellular Biology</td>
            <td>4</td>
          </tr>
          <tr>
            <td>BIO 130</td>
            <td>Microbiology</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 120</td>
            <td>General Chemistry I</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 130</td>
            <td>General Chemistry II</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 220</td>
            <td>Organic Chemistry I</td>
            <td>5</td>
          </tr>
          <tr>
            <td>CHM 230</td>
            <td>Organic Chemistry II</td>
            <td>5</td>
          </tr>
          <tr>
            <td>CHM 250</td>
            <td>Chemical Instrumentation</td>
            <td>4</td>
          </tr>
          <tr>
            <td>ENG 110</td>
            <td>College Writing I</td>
            <td>3</td>
          </tr>
          <tr>
            <td>ENG 127</td>
            <td>Technical Writing</td>
            <td>3</td>
          </tr>
          <tr>
            <td>MATH 150</td>
            <td>College Algebra</td>
            <td>4</td>
          </tr>
          <tr>
            <td>MATH 152</td>
            <td>Trigonometry</td>
            <td>3</td>
          </tr>
          <tr>
            <td>MATH 220</td>
            <td>Probability and Statistics</td>
            <td>4</td>
          </tr>
          <tr>
            <td>PHY 100</td>
            <td>Fundamentals of Physics</td>
            <td>4</td>
          </tr>
          <tr>
            <td />
            <td>Wellness/Physical Education</td>
            <td>2</td>
          </tr>
          <tr>
            <td />
            <td>Program Elective Courses</td>
            <td>3</td>
          </tr>
          <tr>
            <td />
            <td>Political Science</td>
            <td>3</td>
          </tr>
          <tr>
            <td />
            <td>Social Science</td>
            <td>3</td>
          </tr>
        </table>
          <div class="tableFoot">
            <p class="grey italic">Minimum Total Credits: 62</p>
          </div>
      </div>
      <div id="rightColumn">
        <h1><span class="thin">Transfer</span> Programs</h1>
        <table>
          <tr>
            <th>Course</th>
            <th>Class</th>
            <th>Credits</th>
          </tr>
        </table>
      </div>
    </div>

CSS：

body {
  background-color: #00a6da;
  margin: 0;
  padding: 0;
}

/* Define font stylings */
.grey {
  color: grey;
}

.italic {
  font-style: italic;
}

.thick {
   font-weight:bold;
}

.thin {
 font-weight:normal;
}
/* Main stylings for the site sets margin, width, font, and background color */
#main {
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-family: Arial, Verdana, Hevetica, sans-serif;
  background-color: white;
  margin-top: 60px;
}

/* Define Styles for the Left and Right Columns */
h1 {
  margin-top: 70px;
  color: #00a6da;
  text-align: center;
  width: 80%;
}

#leftColumn {
  width: 48%;
  margin-left: 10px;
  display: inline-block;
}

#rightColumn {
  width: 48%;
  display: inline-block;
  margin-right: 10px;
}

/* Define style for table footer */
#leftColumn h3.small {
  font-size: 85%;
  width: 80%;
  padding: 5px;
}
.tableFoot {
  text-align: center;
  margin-left: 60px;
  width: 80%;
}
/* Define the styles for the Table in the Left Column */
table {
  width: 80%;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}
#leftColumn td:not(:last-child), #leftColumn th:not(:last-child) {
  text-align: left;
}

#leftColumn td:last-child {
  text-align: right;
  padding-right: 15px;
  width: 10%;
}

#leftColumn tr:not(:first-child):not(:last-child) {
  width: 25%;
}

#leftColumn tr:first-child {
  width: 10%;
}

#leftColumn tr {
  border-bottom: 2px solid black;
}

如果您对网站的设计有任何提示，我很高兴在这里。这是我第一次广泛使用HTML，我在高中学习了一个学期的HTML3 / 4（其中一个较旧的）。

Answer 1

将float:left;添加到#leftColumn和#rightColumn，然后将overflow: auto;添加到#main。

溢出：当您将其添加到父容器时自动工作，因为它在容器上执行clearfix并防止它在内容使用float时自行折叠。您可以在此处详细了解：What methods of ‘clearfix’ can I use?

为什么我的列在HTML中无法正确排列

1 个答案: