Nasıl bir div kalan Yatay Boşluk (CSS uzmanlar için çok basit ama can sıkıcı bir sorun)doldurmak için yapmak

SORU

23 HAZİRAN 2009, Salı

Nasıl bir div kalan Yatay Boşluk (CSS uzmanlar için çok basit ama can sıkıcı bir sorun)doldurmak için yapmak

2 divs var: Sol tarafta bir tane ve benim sayfanın sağ tarafında. Sol tarafında ve sağ tarafında tek kalan boşluğu doldurmak istiyorum genişliği sabit.

Sağ tarafta bir gezinti ve sağ tarafta kalan boşluğu doldurmak için istiyorum:

Benim CSS:

#search {
    width: 160px;
    height: 25px;
    float: left;
    background-color: #FFF;
}

#navigation {
    width: 780
    float: left; 
    /*background-color: url('../images/transparent.png') ;*/
    background-color: #A53030;
}

Benim Html:

<div id="search">

</div>
<?php include("navigation.html"); ?>
<div id="left-column">

Şimdiden teşekkür ederim!

CEVAP

10 Mayıs 2011, Salı

Boushley cevabı buldum sorun varsa sağ sütun daha solda ise sadece soldaki etrafında sarın ve tüm boşluğu doldurmak için devam edecektir. Bu beklediğim bir davranış değil. 'Çözüm' üç sütun sayfaları oluşturma awesome tutorial bunu buldum. bir çok arama sonra

Yazar teklif sabit dış sütunlar ve değişken genişliği bir orta ile üç farklı şekilde, bir sabit genişlik, üç değişken sütunları ile ve diğeri. Daha başka örnekler de daha modern ve etkili buldum. Anlamlı CSS düzen anlayışım gelişti.

Temelde, basit yukarıdaki durumda, ilk sütun sola kaydır ve sabit bir genişlik ver. Sonra ilk sütuna göre biraz daha geniş olan sağ sütun-sol boşluk ver. İşte bu kadar. Bitti. Ala Boushley kodu:

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
            #left {
                    float:left;
                    width:180px;
                    background-color:#ff0000;
            }
            #right {
                    margin-left: 190px;
                    background-color:#00FF00;
            }
    </style>
</head>

<body>
    <div>
            <div id="left">
                    left
            </div>
            <div id="right">
                    right
            </div>
    </div>
</body>

</html>

http://jsfiddle.net/CSbbM/

Boushley örneği ile sol sütun sağa diğer sütun tutar. Sol sütun biter bitmez tekrar tüm boşluk doldurma başlar. Burada sağ sütunda sadece daha fazla sayfaya hizalar ve sol sütun o koca boşluğu kaplar. Hayır akış etkileşimleri gerekli.

Bunu Paylaş: