如何將div對齊到iframe的右側？

Question

在我的JSP中，我有一個iframe和一個div。該div有4個按鈕。

<iframe id="iframe_role" src="" width="75%" height="75%" scrolling="auto" frameborder="1"> 
</iframe> 

<br><br> 

<div id="div_buttons"> 
    <button type="submit" id="button_add">Add Role</button> 
    <button type="submit" id="button_edit">Edit Role</button>  
    <button type="submit" id="button_delete">Delete Role</button>  
    <button type="submit" id="button_refresh">Refresh</button> 
</div> 

我想對齊iframe右側的div，使右側的iframe與右側的Refresh按鈕對齊。

我嘗試使用的div align屬性：

<div id="div_buttons" align="right"> 

但它對準股利瀏覽器窗口的右側。

如何將div對齊到iframe的右側？

Answer 1

你可以使div寬到iframe（在本例中爲75％），並將text-align屬性right：

提示：

#iframe_role { 
 
    width: 75%; 
 
    height: 75%; 
 
    overflow: auto; 
 
} 
 

 
#div_buttons { 
 
    width: 75%; 
 
    text-align: right; 
 
}

<iframe id="iframe_role" src="" frameborder="1"> 
 
</iframe> 
 

 
<br><br> 
 

 
<div id="div_buttons"> 
 
    <button type="submit" id="button_add">Add Role</button> 
 
    <button type="submit" id="button_edit">Edit Role</button>  
 
    <button type="submit" id="button_delete">Delete Role</button>  
 
    <button type="submit" id="button_refresh">Refresh</button> 
 
</div>

： 您應該不會再使用內聯屬性來設置佈局屬性，如高度或寬度...這應該由CSS管理

Answer 2

我想你可以嘗試做這樣的事情：

iframe的樣式：

float: right; 
margin-right: 50px; 

按鈕容器款式：

float: right; 
margin-right: 50px; 

或者利用CSS

其他方式