我正在尝试使界面看起来像这样:

但是,它看起来像这样:


我的代码如下,我真的不知道如何更改它以使事情看起来正确。

        <style type="text/css">
    #choose_div{
      width: 20%;
      height: auto;
      padding: 1px;
      left: 0px;
      /*border: 2px;*/
      float:left;
      box-sizing:border-box;
    }
    #frame_div{
      float:right;
      right:0px;
      height: auto;
      width: 80%;
      border: 2px 2px 2px 2px;
      position: relative;
      box-sizing:border-box;

    }
    #content{
      vertical-align: middle;
    }
    .li_div{
      padding-top: 3px;
      vertical-align: middle;
      height: 30%;
      width: auto;
    }
    .li_div img{

      resize:both;
      padding-right: 10px;
      /*width: 50px;
      height: 50px;
      max-width: 40px;
      max-height: 40px;
      left: li_div.width/2;*/
    }
    .li_choose{
      height: 20%;
      width: 100%;
    }
</style>

 <div id="content">
    <div id="choose_div">
      <ul>
        <li class="li_choose">
          <div class="li_div">
            <p>Save</p>
              <img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
             <hr>
          </div>
        </li>

        <li class="li_choose">
          <div class="li_div">
            <p>Recover</p>
            <img src="arrow.jpg" id="arrow_recover" style="width:10%;height:10%;">
            </div>
        </li>
      </ul>
  </div>
  <div id="frame_div">
    <iframe id="frame_opened">
  </div>
</div>


如果有人可以帮助我提供任何想法,我将不胜感激。提前致谢。
注意:显示错误的“内容”目前是我的iframe。

最佳答案

您应该浮动:左; select-div而不是float:右键单击iframe div

关于css - 外观不令人满意,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15854388/

10-09 08:15
查看更多