HTML LAYOUT YARDIM

drunkeinstein 1591 gün önce

619 defa görüntülendi

bir header tanımladım width değeri olarak 100% verdim
sonra içine 3 ayrı div tanımlayıp onlarada px üzerinden değerler verdim fakat ekranı küçültünce içindeki divler ekrandan taşıyor genişlik olarak bunu nasıl engelleyebilirim. Ekran küçülürken onlar da küçülsün.

html

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (3)

okumusmr

1591 gün önce

Merhaba, sorununun kaynağı px cinsinden vermen. Bu sorunu düzeltmek için bence vw özelliğini kullanabilirsin. 1vw ekran genişliğinin 100'de birini ifade ediyor.

<div class="ana">
        <div class="bir">birinci div</div>
        <div class="iki">ikinci div</div>
        <div class="uc">ücüncü div</div>
</div>

 .ana {
            padding: 30px;
            background-color: red;
            width: 100%;
            display: flex;
        }

         .bir {
            width: 33vw;
            background-color: #0a6aa1;
        }

         .iki {
            width: 33vw;
            background-color: #0ac282;
        }

         .uc {
            width: 33vw;
            background-color: #0af9d7;
        }

Mobil
PC
Yukarıdaki kodu denediğinde ekran boyutu ne olursa olsun her div ekranın 33% lik kısmını kapsayacak. Daha ayrıntılı öğrenmek istersen: w3schools
Bu yazıda ise çok daha geniş kapsamlı kullanımlarına örnek verilmekte: Css-tricks

#002592

drunkeinstein

1590 gün önce

Teşekkür ederim cevaplarınız için

#002601

helloworld

1590 gün önce

Sanırım yei başlamışsın bunu yapabilmek için css flexbox derslerine bakabilirsin ben senin için örnek hazırladım

<header class="header">
    <div class="flex"></div>
    <div class="flex"></div>
    <div class="flex"></div>
</header>

*{
padding: 0; /* Bunları senin istediğin gibi tam kaplasın diye yaptım bilmiyosan yapmana gerek yok */
margin: 0;
box-sizing: border-box;
}
.header{
width: 99%;
color: red;
display: flex;
justify-content: space-around;

.flex{
color: red;
width: 33%;

#002595