html - 列与相同的 CSS 不一致

Question

对于这些列中的每一列，我在 html 中都有准确的编码，但我不确定我在 CSS 中进行了哪些更改以使这些列看起来如此不同。左栏是我想要的样式和定位。我不明白更多按钮有何不同，以及右侧的更多按钮如何与灰色框完全分开，即使它们在同一个 div 中......我是新手所以任何帮助都会很大不胜感激!

我将添加一个 jsfiddle 来显示所有代码，我将在此处添加一部分代码:https://jsfiddle.net/40bnatg3/

还有一张问题图片:

<div class="column-center">
<div id= "middle-box">
    <h2> Objectives</h2>
     <img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
    <p >Upon successful completion of the course the student will:
1) Demonstrate competency in the following computer software applications or 
practices;
a. HyperText Markup Language (HTML5)
b. Cascading Style Sheets (CSS3)
c. Photoshop
d. IFirefox, Chrome, Safari, IE 
e. FTP clients (Fetch, Filezilla, etc.)
2. Design web pages of various complexities. 
3. Understand terminology used in web publishing.
4. Discuss the importance of graphic applications and their relationship to the graph
-
ic communications industry.

<br>

<a id="button2" href="msum.css" class="more">More</a>
</p>
 </div>

 </div>

Answer 1

从 .column_center 样式类定义中删除 position:relative:

.column-center{
    display: inline-block;
    width: 30%;
    padding: 1%;
    bottom: 18px;
}

此外，您还必须删除第 49 行中左列 html 和中心列 html 之间的 br 标记。

然后您必须将 button1 id 定义更改为:

#button1{
    color:black;
    top: 35px;
    width: 30%;
    padding: 1%;
    position: relative;
    display: inline-block;
    font-weight:bold;
}

编辑:

我认为删除#button1、#button2 和#button3 的所有css 样式并只保留class 的样式对您的代码来说更清晰。更多像这样:

.more {
  position: relative;
  display:inline-block;
  color:black;
  font-weight: bold;
  top: 20px;
  right: 31px;
  background-color: white;
  border-bottom-left-radius: 10px;
  padding: 5px;
  margin: 10px;
  width: 30%;
}