Question

我知道这个问题有100种不同的问题，但我还没有找到适合我的答案。基本上我有两个嵌套在包装器中的元素，其中一个内部元素基本上只是一个将元素弹出到DOM中的angular指令的设置。看起来像这样

<div class="panel-body" id="swfStage" style="width:320px; height:240px;background-color: #355E95;overflow: auto;white-space:nowrap  ">
    <div class="swfWrapper" style="width: 80%;display: inline-block;">
        <div tf-swf class="tf-container" tf-src="swfs/thin.swf" tf-min-version="11.0.0"></div>
    </div>
    <div class="chatWrapper" style=style="width: 19%;display: inline-block;">It works</div>
</div>

这里的目标是最外面的是两个主要内部的容器...我希望这些div是并排的

我在这里给的是两个内在的div。

Answer 1

你的html中只有一个拼写错误：

style=style=

应该只是

style=

Answer 2

在保持HTML结构的同时，您可以通过以下几种方式解决这个问题（但是为清洁度取出了内联样式定义）。

<强> HTML

<div class="panel-body" id="swfStage">
    <div class="swfWrapper">
        <div tf-swf class="tf-container" tf-src="swfs/thin.swf" tf-min-version="11.0.0"></div>
    </div>
    <div class="chatWrapper">It works</div>
</div>

选项1：表格样式选项的CSS

.panel-body {
    width:320px;
    height:240px;
    background-color: #355E95;
    overflow: auto
    display: table;
}

.swfWrapper {
    width: 80%;
    display: table-cell;
    background-color: red;
}

.chatWrapper {
    width: 19%;
    display: table-cell;
    background-color: green;
}

选项2：定位选项的CSS

.panel-body {
    width:320px;
    height:240px;
    background-color: #355E95;
    overflow: auto;
    position: relative;
}

.swfWrapper {
    width: 80%;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}

.chatWrapper {
    width: 20%;
    height: 100%;
    background-color: green;
    position: absolute;
    top: 0;
    right: 0;
}

就个人而言，我更喜欢第二种选择。

Answer 3

您可以使用CSS3 flex (fiddle)：

.panel-body {
    width: 320px;
    height: 240px;
    background-color: #355e95;
    overflow: auto;
    white-space: nowrap;
    display: flex;
}

.swfWrapper {
    flex: 1 0 80%;
}

.chatWrapper {
    flex: 1 0 20%;
    overflow: hidden;
}

在angularjs中使用指令时，将Div放在列中

3 个答案: