不滿意的外觀

Question

我試圖讓一個接口，看起來像：

但是，相反，它看起來像這樣：

我的代碼如下，我真的不知道我應該如何改變它以使事物看起來合適。

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

Answer 1

你應該浮動：left;選擇div而不是float：right iframe div

Answer 2

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