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本身是一个块元素，它将占据整个宽度。您可以将div的正常行为从block元素更改为inline-block元素。这是一种方式。

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

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

#asset_list{
   float:left;
 }

作为CSS中的HTML，我使用＃tag作为Id。 尝试使用类而不是ID

Answer 2

在黑暗中只是一枪，因为我仍然没有100％关于首选结果。请参阅代码段。

由于public class Tile : ContentControl { public static readonly DependencyProperty ToolbarContentProperty = DependencyProperty.Register("ToolbarContent", typeof(FrameworkElement), typeof(Tile), new PropertyMetadata()); public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(Tile), new PropertyMetadata()); public FrameworkElement ToolbarContent { get { return (FrameworkElement)GetValue(ToolbarContentProperty); } set { SetValue(ToolbarContentProperty, value); } } public string Title { get { return (string)GetValue(TitleProperty); } set { SetValue(TitleProperty, value); } } static Tile() { DefaultStyleKeyProperty.OverrideMetadata(typeof(Tile), new FrameworkPropertyMetadata(typeof(Tile))); } }

，不需要display:inline-block

我删除了float元素上的height:100%，现在两个div都是并排的，似乎停留在容器边界内。

#mainFrame

.asset_list_wrapper div, iframe {
    float: left;
    height:500px;
}

#asset_list {

    width:300px;
    background-color:blue;
}


#mainFrame{
    overflow: hidden; 
    width: 100%; 
    background-color:red;
    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;
}

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

2 个答案: