列与同一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行中左侧colum 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样式更简洁，只留下类的样式。更像这样：

.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%;
}