HTML页面上DIV显示的方向

Question

以下是代码，显示其相应的divs中的三个不同报告。

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>