html - div在html页面上的显示方向

Question

下面的代码在相应的 div 中显示了三种不同的报告。

Hookdiv 、keymessagediv 和 WhoToVisit

现在对于前两个，它显示两个饼图。对于 WhoToVisit，它显示表的数据。

HTML

<div id="Hooksdiv" style="float:right">
   <div id="chartContainer" style="height: 50%; width: 100%;"></div><!-- 370px -->
</div>


<p id="demo2"></p>

<div id="keymessagediv" style="float:left">
    <div id="chartContainerkey" style="height: 50%; width: 60%;"></div>
    <div id="keyMessageChartContainerkey" style="height: 50%; width: 60%;"></div>
</div>

<div id="WhoToVisit">
    <table id="strikerate" class="dataTable" width="100%" height = "50%" style = "position: relative ;bottom: 0;left: 0;">
                <tr>
                    <th id="accName">Name</th>
                    <th id="PrimaryaccName">Primary Account</th>
                    <th id="plannedCall">Planned Calls</th>
                    <th id="actualCall">Actual Calls</th>
                    <th id="strike">Strike Rate</th>
                    <th id="coverage">Coverage</th>

                </tr>
    </table>
</div>

有人能帮我按照下图中的要求放置 div 吗？我无法按预期定位它。 请在 divs 的位置找到附加图片

Answer 1

您的前两个 div 应该具有相同的宽度，以便它可以很容易地放在一行中。我给的高度是200px，你可以根据自己的需要修改。您也可以使用 bootstrap 来实现这一点。

<div id="Hooksdiv" style="float:right;border: 2px solid black; width: 50%; height: 200px;">
   <div id="chartContainer" style="height: 50%; width: 100%;"></div><!-- 370px -->
   Hooksdiv
</div>


<p id="demo2"></p>

<div id="keymessagediv" style="float:left; border: 2px solid green; width: 49%; height: 200px;">
    <div id="chartContainerkey" style="height: 50%; width: 60%;"></div>
    <div id="keyMessageChartContainerkey" style="height: 50%; width: 60%;">keymessagediv</div>
</div>

<div id="WhoToVisit" style="border: 2px solid red;">
    <table id="strikerate" class="dataTable" width="100%" height = "50%" style = "position: relative ;bottom: 0;left: 0;">
                <tr>
                    <th id="accName">Name</th>
                    <th id="PrimaryaccName">Primary Account</th>
                    <th id="plannedCall">Planned Calls</th>
                    <th id="actualCall">Actual Calls</th>
                    <th id="strike">Strike Rate</th>
                    <th id="coverage">Coverage</th>

                </tr>
    </table>
</div>