İki divi aynı boyutta tutma

17-09-2019, 00:54:41

Merhabalar elimde iki div. Birinci veya ikinci divin yüksekliği sürekli değişmekte. Ben bunları aynı hizada nasıl tutabilirim?

Yani 1. divin yüksekliği 200px olduğunda 2. divin de yüksekliğinin 200px olmasını. Yine aynı mantıkla 2. divin yüksekliği mesela 600px olduğunda ben birinci divin de aynı yükseklikte olmasını istiyorum bunu nasıl yapabilirim?

Not: Divlerin yüksekliği içindeki veriye göre değişkenlik gösteriyor. Yani bir sorguda divin yüksekliği 200px, başka sorguda 400px oluyor. Bundan dolayı maalesef sabit bir yükseklikleri yok. Bir div küçük, diğer divde büyük olunca göze hoş gözükmüyor. Var mıdır bunun hâl çaresi.

17-09-2019, 00:57:36

#2

~~Solutions~~

Üyeliği durduruldu

3. bir div açıp boyutunu istediğiniz şekilde verip içerideki 2 divi 100% olarak ayarlayın.Veya bootstrap en temizi olacaktır.

17-09-2019, 00:59:13

#3

MSA

Bootstrap kullanıyorsan 2 divi de kapsayıcı bir row içine alabilirsin. Kullanmıyorsan iki dive de inline-block verebilirsin.

https://stackoverflow.com/questions/...-the-same-line

17-09-2019, 01:03:42

#4

Onur89TR

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#AnaDiv{display:flex} <!-- Yükseklikleri Eşitle -->
.IcDivler{flex:1} <!-- Genişlikleri Eşitle -->
</style>
</head>
<body>
<div id="AnaDiv">
<div class="IcDivler">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960’larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div>
<div class="IcDivler">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</div>
</div>
</body>
</html>

17-09-2019, 01:15:11

#5

uckan

Kurumsal Üye

https://codepen.io/uckannet/pen/dybqpPg

17-09-2019, 01:16:50

#6

Onur89TR

Yükseklikleri eşitle ve genişlikleri eşitle kısmını kaldırın, çalışacaktır.  tagının style i bozduğunu da yeni öğreniyorum, bir yaşımıza daha girdik.

17-09-2019, 01:28:09

#7

ASametYildirim

Solutions adlı üyeden alıntı: mesajı görüntüle

3. bir div açıp boyutunu istediğiniz şekilde verip içerideki 2 divi 100% olarak ayarlayın.Veya bootstrap en temizi olacaktır.

MSA adlı üyeden alıntı: mesajı görüntüle

Bootstrap kullanıyorsan 2 divi de kapsayıcı bir row içine alabilirsin. Kullanmıyorsan iki dive de inline-block verebilirsin.

https://stackoverflow.com/questions/...-the-same-line

Onur89TR adlı üyeden alıntı: mesajı görüntüle

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#AnaDiv{display:flex} <!-- Yükseklikleri Eşitle -->
.IcDivler{flex:1} <!-- Genişlikleri Eşitle -->
</style>
</head>
<body>
<div id="AnaDiv">
<div class="IcDivler">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960’larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div>
<div class="IcDivler">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</div>
</div>
</body>
</html>

uckan adlı üyeden alıntı: mesajı görüntüle

https://codepen.io/uckannet/pen/dybqpPg

Hepinize ayrı ayrı çok teşekkür ederim. Sayenizde artık divlerim hizaya geldi.