如何在div下创建按钮

Question

我试图在div下创建一个按钮，但按钮浮动到左侧而不是右侧浮动。我想实现这样的事情：

到目前为止，这是有：

HTML：

<div class="container"> 
    <div class="main"> 
    <div class="sectiontitle"> 
     <h1 class="maintitle">Free Pick-Up<br>and Delivery</h1> 
    </div> 
    <div class="sectiondes"> 
     <p class="maintext"> We offer a free pick up and delivery service to your home or place of work.</p> 
    </div> 
    <div class="sectionbutton"> 
     <button href="#!" class="button">learn more</button> 
    </div> 
    </div> 
</div> 

CSS：

.container { 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom:0px; 
} 


.main{ 
    margin-top: 100px; 
    background: url("../img/Home-img.jpg"); 
    height: 931.5px; 
    width: 1920px; 
    float: right; 
} 



.maintitle{ 
    font-family: 'Roboto', sans-serif; 
    font-weight: 500; 
    font-size: 65px; 
    color: #000; 
    letter-spacing: 2px; 
    line-height: 60px; 
    height: 120px; 
    width: 641.6px; 
    margin-top: 121px; 
    margin-right: 392.4px; 
    margin-left: 886px; 
    margin-bottom: 30px; 
    text-align: right; 
} 

.maintext{ 
    height: 68px; 
    width: 489.6px; 
    margin-right: 392.4px; 
    text-align: right; 
    float: right; 
    font-size: 24px; 
    color: #000; 
    letter-spacing: 0; 
    line-height: 34px; 
    margin-top:0px; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
    margin-bottom: 30px; 

} 

.sectionbutton{ 
    float: right; 
} 

button{ 
    background-color: #1B325F; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 700; 
    border: none; 
    padding: 13px 28.5px 13px 29px; 
    float: right; 
    text-align: center; 
    text-decoration: none; 
    border-radius: 2px; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    font-size: 18px; 
    color: #ffffff; 
    letter-spacing: -0.03px; 
    margin-right: 392.4px; 

} 

我知道一个事实问题是我的CSS，但我不知道如何使按钮在其他div下面。该codepen是https://codepen.io/mrsalami/pen/Yxpyop

Answer 1

.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-bottom:0px; 
 
} 
 

 

 
.main{ 
 
    margin-top: 100px; 
 
    background: url("../img/Home-img.jpg"); 
 
    height: 931.5px; 
 
    width: 1920px; 
 
    float: right; 
 
} 
 

 

 

 
.maintitle{ 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 500; 
 
    font-size: 65px; 
 
    color: #000; 
 
    letter-spacing: 2px; 
 
    line-height: 60px; 
 
    height: 120px; 
 
    width: 641.6px; 
 
    margin-top: 121px; 
 
    margin-right: 392.4px; 
 
    margin-left: 886px; 
 
    margin-bottom: 30px; 
 
    text-align: right; 
 
} 
 

 
.maintext{ 
 
    height: 68px; 
 
    width: 489.6px; 
 
    margin-right: 392.4px; 
 
    text-align: right; 
 
    float: right; 
 
    font-size: 24px; 
 
    color: #000; 
 
    letter-spacing: 0; 
 
    line-height: 34px; 
 
    margin-top:0px; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
    margin-bottom: 30px; 
 
    
 
} 
 

 
.sectionbutton{ 
 
    clear: both; 
 
    float: right; 
 
} 
 

 
button{ 
 
    background-color: #1B325F; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 700; 
 
    border: none; 
 
    padding: 13px 28.5px 13px 29px; 
 
    float: right; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    border-radius: 2px; 
 
    margin-bottom: 20px; 
 
    text-transform: uppercase; 
 
    font-size: 18px; 
 
    color: #ffffff; 
 
    letter-spacing: -0.03px; 
 
    margin-right: 392.4px; 
 
    
 
}

<div class="container"> 
 
    <div class="main"> 
 
    <div class="sectiontitle"> 
 
     <h1 class="maintitle">Free Pick-Up<br>and Delivery</h1> 
 
    </div> 
 
    <div class="sectiondes"> 
 
     <p class="maintext"> We offer a free pick up and delivery service to your home or place of work.</p> 
 
    </div> 
 
    <div class="sectionbutton"> 
 
     <button href="#!" class="button">learn more</button> 
 
    </div> 
 
    </div> 
 
</div>