html - 并排放置两个div。一个 div 有一个 iframe

Question

可能是多余的问题。但我不知何故为此苦苦挣扎。

<div class='asset_list_wrapper'>
    <div id='asset_list'>
    </div>
    <div id='asset_view'>
        <iframe src='' frameborder='0' id='mainFrame' name='mainFrame' height='100%' width='100%'></iframe>
    </div>
</div>

.asset_list_wrapper div, iframe {
    float: left;
}
.asset_list_wrapper {
    display:inline-block;
}

.asset_list {
    display:inline-block;
    width:300px;
}
.asset_view{
    display:inline-block;
}

#mainFrame{
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    position: absolute;
}

.asset_link_p {
  width: 295px;
  padding: 10px;
  border: 1px solid navy;
  margin: 5px;
}
.asset_link{
    text-decoration: underline;
}
.asset_link:hover{
    cursor:pointer;
    text-decoration: underline;
    color:blue;
}

asset_list div 应为 300px 宽(没问题 ;-) )并且 asset_view 应为自动宽度。两者都是自动高度。然而，当我将内容加载到 asset_list 时，它超出了包装器的高度。加载东西时也是如此(从 asset_list 中的链接)..所以没有可见的顶部数据。

Answer 1

你不需要做太多辛苦的工作。由于 div 本身是一个 block 元素，它将占据整个宽度。您可以将 div 的正常行为从 block element 更改为 inline-block element 。这是一个办法。

#asset_list,#asset_view{
   display:inline-block;
}

另一种方法是将第一个子 div 元素向左浮动。

#asset_list{
   float:left;
 }

作为 CSS 中的 HTML，我使用 # 标记作为 Id。 尝试使用类而不是 ID