Ausrichtung der Div-Anzeige auf HTML-Seite

Question

Unten ist Code, der drei verschiedene Berichte innerhalb ihrer entsprechenden divs zeigt.

Hookdiv, keymessagediv und WhoToVisit

Jetzt für die ersten beiden, zeigt es zwei Kreisdiagramme. Unter WhoToVisit werden die Daten einer Tabelle angezeigt.

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> 

Können einige mir bitte helfen, die divs zu platzieren, wie im Bild unten erforderlich. Ich kann es nicht wie erwartet positionieren. Angehängtes Bild finden Sie auf den Positionen divs

Answer 1

Ihre ersten beiden Divs sollten die gleiche Breite haben, damit sie leicht in eine einzelne Reihe passen. Ich habe die Höhe von 200px gegeben, Sie können es gemäß Ihren Anforderungen ändern. Sie können auch Bootstrap verwenden, um dies zu erreichen.

<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>