Как выровнять divs разных родителей?

Я хотел бы иметь меню, содержащее контент внутри, и содержимое выравнивается с другими пунктами меню.Как выровнять divs разных родителей?

В настоящее время у меня есть:

[- someth      something else] 
[- something   something else something] 
[- some     something else some]

И я хочу, чтобы быть выровнены так:

[- someth   something else   ] 
[- something   something else something] 
[- some    something else some  ]

Вот код того, что у меня есть сейчас, но как я могу сделать это так, Я хочу?

.menu { 
 
    width: 100%; 
 
} 
 
.menu-item { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
.wrapper2 { 
 
    display: flex; 
 
}

<div class="menu"> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Someth</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Something</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>something</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Some</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>some</p> 
 
    </div> 
 
    </div> 
 

 
</div>

JSFiddle

источник

2016-11-08 William

Я закончил с использованием jQuery, чтобы изменить размер .wrapper2 и используя тот же код, только запасной CSS.

var size = 0; 
$('.wrapper2').each(function() { 
    if($(this).width() > size) 
    { 
     size = $(this).width(); 
    } 
}); 
$('.price-wrapper2').width(size);

источник

2016-11-08 13:01:30 William

Это можно сделать только с чистым css, см. Мой ответ @Wiliam –

Что-то вроде этого.

гибкий контейнер расширяет элементы, чтобы заполнить свободное место, или сжимает их, чтобы предотвратить переполнение. flex: 1; разделит Flex-поле на две равных частях

.menu { 
 
    width: 100%; 
 
} 
 
.menu-item { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
.wrapper2 { 
 
    display: flex; 
 
    width: 50%; 
 
} 
 
.wrapper2 > p { 
 
    flex: 1; 
 
} 
 
.wrapper2 > p:last-child { 
 
    text-align: right; 
 
}

<div class="menu"> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Someth</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Something</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>something</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Some</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>some</p> 
 
    </div> 
 
    </div> 
 

 
</div>

источник

2016-11-08 12:19:19

Спасибо за ответ. Я пытался использовать 'width: 50%' или какое-то другое значение, но это не мобильно. Есть ли другой способ сделать это? – William

Первый комментарий был к другому ответу, извините за беспорядок, но я попробую 'text-align: right' – William

Решение было не тем, что я хотел, поэтому я закончил использование jQuery, чтобы сделать все равно' width 'size и сохранит' justify-content: space-between' только в качестве резервного CSS. Однако, спасибо! – William

Вместо использования justify-content: space-between на первичный гибкий контейнер, какие пространства ваших деталей гибкого трубопровода к противоположным концам контейнера, используйте flex: 1 на гибком которые заставляют их одинаково распределять контейнерное пространство.

.menu { 
 
    width: 100%; 
 
} 
 
.menu-item { 
 
    display: flex; 
 
    /* justify-content: space-between; */ 
 
    align-items: center; 
 
} 
 
.menu-item > * { 
 
    flex: 1;      /* new */ 
 
    border: 1px dashed black; 
 
} 
 
.wrapper2 { 
 
    display: flex; 
 
    justify-content: space-between; /* optional; just for demo */ 
 
}

<div class="menu"> 
 
    <div class="menu-item"> 
 
    <div class="wrapper1">Someth</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
    <div class="wrapper1">Something</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>something</p> 
 
    </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
    <div class="wrapper1">Some</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>some</p> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-11-08 12:19:50

Это хороший ответ, но больший '.wrapper2' должен касаться конца' .menu-item'. Есть ли способ сделать это? Я попытался использовать 'flex: 10' для' .wrapper1' и 'flex: 1'' .wrapper2', но он заканчивается тем же образом, что и сейчас. – William

Право. Он не будет работать с разными значениями «flex-grow». Попробуйте вместо этого использовать 'flex-basis': https://jsfiddle.net/g1j38jph/3/ –

Решение не было тем, что я хотел, поэтому я закончил использование jQuery, чтобы сделать все тот же размер' width' и будет поддерживать «justify-content: space-between» как только резервный CSS. Однако, спасибо! – William

Вы просто должны использовать правильное соотношение в CSS, вот ссылка: JSFiddle

.menu, 
.menu-item:first-of-type p{ 
    width: 100%; 
} 
.menu-item { 
    width:100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
.wrapper2 { 
    display: flex; 
} 
.wrapper1, 
.wrapper2, 
.menu-item:nth-of-type(2) p, 
.menu-item:nth-of-type(3) p { 
    width:50%; 
} 
.menu-item:nth-of-type(2) p:nth-of-type(2), 
.menu-item:nth-of-type(3) p:nth-of-type(2) { 
    text-align:right; 
}

источник

2016-11-08 13:18:51 Sieen

Почему не просто

.menu { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.wrapper1, .wrapper2 { 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 

 
.menu-item:nth-child(2) { 
 
    text-align: right; 
 
    padding-right: 5px; 
 
}

<div class="menu"> 
 
    <div class="menu-item"> 
 
     <div class="wrapper1"> 
 
      Someth 
 
     </div> 
 
     <div class="wrapper2"> 
 
      <p> 
 
       something else 
 
      </p> 
 
      <p> 
 
      </p> 
 
     </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
     <div class="wrapper1"> 
 
      something else 
 
     </div> 
 
     <div class="wrapper2"> 
 
      <p> 
 
       something else 
 
      </p> 
 
      <p> 
 
       something else 
 
      </p> 
 
     </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
     <div class="wrapper1"> 
 
      Some 
 
     </div> 
 
     <div class="wrapper2"> 
 
      <p> 
 
       something else 
 
      </p> 
 
      <p> 
 
       some 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>

источник

2016-11-08 13:51:34

Спасибо Алан, но это не очень хороший подход, что, если мой первый или мой последний «.menu-item» является более крупным? Если я изменю текст, мне придется менять CSS каждый раз, или если у меня есть несколько элементов, я бы с ума сходил, чтобы проверить, что один больше :). И каким-то образом ваш код сделал 3-й файл '.menu-item'' Some' для перемещения вверх по lol. – William

Я сделал cols, а не строки, вот почему :) –

Как выровнять divs разных родителей?

ответ

Смежные вопросы