私はそのように見えるようにインターフェースを作ろうとしています:
しかし、代わりに、次のようになります。
私のコードは次のとおりです。適切に見えるように変更する方法がよくわかりません。
<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です。