jquery - css div float 布局

Question

我从使用表格设计布局开始，现在终于尝试使用 div。

但我仍然无法正确布局。它不像表格那么明显。 例如，我有:

var html_output = 
"<div id='infoPlanet' style='width:400px;'>"+
"   <div id='gambarPlanet' style='padding: 0px; width:200px; margin-left:auto; margin-right: 200px;'>"+
"       <IMG SRC='\\Planets\\planet"+gambarPlanet+ ".jpg'>"+
"   </div>"+ 
"   <div id='kadarSehari' style='padding: 0px; width:200px; margin-left:auto; margin-right: 200px;'>"+
"       <table class='kadarPlanet'>"+
"       <tr><td>Kadar Kelahiran</td><td>"+kadarmanusia+"</td></tr>"+
"       <tr><td>Kadar Perlombongan</td><td>"+kadarkristal+"</td></tr>"+
"       <tr><td>Kadar Penjanaan</td><td>"+kadarnadir+"</td></tr>"+
"       </table>"+
"   </div>"+
"</div>"

但是结果是左侧是 gambarPlanet，右侧是 kadarSehari。 如何让 kadarSehari 低于 gambarPlanet？

我已将 gambarPlanet 的宽度更改为 300px 以使 gambarPlanet.width + kadarSehari.width = 300+200 > 400，但 kadarSehari 刚刚超过主 div (infoPlanet) 右边界。 kadarSehari div 不想低于 gambarPlanet。

我已经尝试了 gambarPlanet.style.float="top"和 kadarSehari.style.float="bottom"但仍然没有任何反应。我试过 position: absolute, position: static，但似乎没有任何改变。

如果你不介意，如果我想要两个 div，我应该写什么结构: 1)并排出现(就像我目前正在输出的，但那只是运气，我不明白它背后的机制) 2) 出现一个在彼此之上。

如果我想要4个div:左中-左中-右右，我应该怎么写div？

我可以在 5 分钟内用 编写这个，我花了 6 个小时尝试用 div 编写代码，目前我无能为力。

如果你能帮忙，请告诉我该怎么做。希望我能学习一些东西。

Answer 1

如果你想让两个 div 相邻，你只需要添加 float:left;:

<div id="infoPlanet" style="width:400px;">
    <div id="gambarPlanet" style="width:200px;float:left;"></div>
    <div id="kadarSehari" style="width:200px;float:left;"></div>
</div>

如果你想让第二个在第一个下面使用:

<div id="infoPlanet" style="width:200px;">
    <div id="gambarPlanet" style="width:200px;"></div>
    <div id="kadarSehari" style="width:200px;"></div>
</div>

有关工作演示，请参阅 this fiddle