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>

我想将div与iframe右侧对齐，以便iframe的右侧与“刷新”按钮的右侧对齐。

我尝试使用div的align属性：

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

但它将浏览器窗口右侧的div对齐。

如何将div与iframe右侧对齐？

Answer 1

我认为你可以尝试这样做：

iframe样式：

float: right;
margin-right: 50px;

按钮容器样式：

float: right;
margin-right: 50px;

或使用css的其他方式

Answer 2

您可以将div设为与iframe一样宽（在本例中为75％），并将text-align属性设置为right：

提示： 您不应再使用内联属性来设置布局属性，例如高度或宽度...这应该由css管理：

#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>

如何将div与iframe的右侧对齐？

2 个答案: