0

我正在尝试使界面看起来像这样：我的形象

但相反，它看起来像这样：
它看起来如何

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

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

4

2 回答 2

1

你应该浮动：左；选择div而不是浮动：对iframe div

于 2013-04-06T18:26:03.460 回答
0 
  <style type="text/css">
  html,body{margin:0px;}
  p{      font-family:Tahoma; font-size:30px ;}
    #choose_div{
      width: 20%;
      height: auto;
      padding: 1px;
      left: 0px;
     float:left;
    }

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

ul li{
list-style:none;
}
    .li_div img{
      padding-right: 10px; 
      /*width: 50px;
      height: 50px;
      max-width: 40px;
      max-height: 40px;
    }
    .li_choose{
      height: 20%;
      width: 100%;
    }

    .hr{ display:none;margin-left:0px 
    color:black;
    background-color: #000;
    height: 5px;}

    #frame_div{
    float:left;
         height: 100%;
      width: 80%;
    }

</style>

 <div id="content">
    <div id="choose_div">
      <ul>
        <li class="li_choose">
          <div class="li_div">
            <p>Save &#10157;</p> 
          <hr style="height:3px;background-color: #000;" />
          </div>
        </li>

        <li class="li_choose">
          <div class="li_div">
            <p>Recover &#10157;</p>

            </div>
        </li>
      </ul>
  </div>

  <div id="frame_div">
    <iframe border="1"  src="empty.htm" style="border-style: solid;width: 79%; background-color: #555;height: 100%;">Here is the video</iframe>
  </div>
</div>
于 2013-04-06T18:56:46.503 回答