HTML LAYOUT YARDIM

drunkeinstein 1245 gün önce

491 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

Cevaplar (3)

okumusmr

1245 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

1244 gün önce

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

#002601

helloworld

1244 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