列與相同的CSS不一致

Question

我在每個這些列的html中都有確切的編碼，我不確定我在css中更改了哪些列，以使列看起來完全不同。左欄是我想要的風格和定位。我不明白如何所有更多的按鈕是不同的，即使他們在同一個分區，右側的更多按鈕是如何與灰色框完全分開的......我是新手，所以任何幫助都會很大不勝感激！

我會加的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類的定義相對：刪除位置

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

此外，你將不得不刪除br標籤是左科拉姆html和中心柱HTML之間的線路49

然後，你必須將Button1的ID定義修改爲：

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

編輯：

我認爲這是你的代碼的清潔劑去除所有的CSS樣式＃按鈕1，＃按鈕2和＃BUTTON3和剛剛離開類風格更多這樣的：

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