Как дать третьему дочернему div внутри одного родительского div

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

Использование css float сработает, если вы захотите назначить фиксированную ширину вашему div'у.

<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>');

Обновление:

Вот демонстрация, которую я создал для этого

Идея состоит в том, что родительский div долженрасполагаться relative и дочерние элементы absolute, а затем использовать свойства top, left, width и height.