Question

我有一个父div。父div的顶部包含两个子div。我如何在第一个孩子div下面给第三个孩子div

<div class=parent1>
  <div class=child1>some text</div> /*this is in top left of the parent div */
  <div class=child2>some text</div> /*this is in top right of the parent div */
  <div class=child3>some text</div> /*how can i write css for this div come as left bottom*/

Answer 1

如果您愿意为div分配固定宽度，则可以使用css float 。

<style>
  div.parent1 {
    width: 800px;
  }

  .child1 {
    float: left;
    width: 400px;
  }

  .child2 {
    float: right
    width: 400px;
  }

  .child3-container {
    clear:both;
    text-align: right;
  } 

</style>

<div class=parent1>
  <div class=child1>some text</div> 
  <div class=child2>some text</div> 
  <div class='child3-container' >
    <div class=child3>some text</div> 
  </div>
</div>

Answer 2

您可以使用jQuery轻松完成工作。使用jquery的 eq() 选择器为您提供所需的div：

$('div#parent div:eq(1)'); // gets second div inside a div with id parent

我如何在下面给出第三个孩子div 第一个孩子div

如果我找到你，你想在第一个子div之后添加另一个div，你可以再次使用eq和after选择器：

$('div#parent div:eq(0)').after('<div>Some Content</div>');

<强>更新

<强> Here is the demo I created for that

我们的想法是，父div应位于relative，子div absolute，然后使用top，left，width和{{1} } properties。

如何在一个父div中提供第三个子div

2 个答案: