Sayfayı iki eşit parçaya bölemiyorum, CSS de takıldım

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Sayfayı iki eşit parçaya bölemiyorum, CSS de takıldım

Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı

1
Cevap 3534
Tıklama 0
Öne Çıkarma

1. sayfa

Sayfayı iki eşit parçaya bölemiyorum, CSS de takıldım

Cevap Yaz

monarch25

7 yıl

Binbaşı

Konu Sahibi

Arkadaşlar sayfayı ikiye bölemiyoum şöyleki
HTML kodu böyle, en başta her şeyi kapsayan bir div var "back_page"
daha sonra onun çocuğu olan 2 div daha "first, second"
en son da first'ün çocuğu var div "1"


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>SAMPLE</title>
  </head>
  <body>
    <div class="back_page">
      <div class="first">
        <h1>first class</h1>
        <div class="1">
          <h1>text inside the first class</h1>
        </div>
      </div>
      <div class="second">
        <h1>second class</h1>
      </div>
    </div>
  </body>
</html>

Şimdi ben first ve second için sayfayı eşit iki parçaya bölmek istiyorum.
İşte Css kodu


*
{
  box-sizing: border-box;
}

html, body, h1, h2, h3, ul, li, a, p,
header, main, section, article, footer, aside, nav
{
  margin: 0;
  padding: 0;
}

header, main, section, article, footer, aside, nav
{
  display: block;
}


.back_page
{
  background-color: #199;
  height: 100%;
  display: block;
}

.first
{
  float: left;
  height: 100%;
}

.second
{
  height: 100%;
  float: left;
}

lakin ekran şöyle oluyor.
< Resime gitmek için tıklayın >

< Resime gitmek için tıklayın >

Hiçbiri ekranın tamamını kaplamamış.
Birde CSS deki bazı kodlar kopyala yapıştır. Anlamadığım yerler var
1) display:block
2) box-sizing: border-box

JacquesC

7 yıl

Binbaşı

Bkz: .clear{clear:both}

Örnek Kodlama Aşağıda;

 
   
  { 
  box-sizing: border-box; 
  } 
   
  html, body, h1, h2, h3, ul, li, a, p, 
  header, main, section, article, footer, aside, nav 
  { 
  margin: 0; 
  padding: 0; 
  } 
   
  header, main, section, article, footer, aside, nav 
  { 
  display: block; 
  } 
   
   
  .back_page 
  { 
  background-color: #199; 
  display: block; 
  } 
   
  .first 
  { 
  float: left; 
  width:50%; 
  } 
   
  .second 
  { 
  float: left; 
  width:50%; 
  }  
   
  .clear{clear:both;}

 
  <!DOCTYPE html> 
  <html> 
  <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="style.css"> 
  <title>SAMPLE</title> 
  </head> 
  <body> 
  <div class="back_page"> 
  <div class="first"> 
  <h1>first class</h1> 
  <div class="1"> 
  <h1>text inside the first class</h1> 
  </div> 
  </div> 
  <div class="second"> 
  <h1>second class</h1> 
  </div> 
  <div class="clear"></div> 
  </div> 
  </body> 
  </html>

< Bu ileti tablet sürüm kullanılarak atıldı >

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Sayfayı iki eşit parçaya bölemiyorum, CSS de takıldım