CSS ile İstifleme Divs

oy
0

Bu CSS ve tarayıcıların güncel set ile özellikle zor olduğunu biliyorum, ama yine de ben gereksinimi var.

Bir sütunda 3 div'leri olması gerekiyor. Her div (örneğin,% 33) dikey alanı belirli bir yüzdesini almak gerekir. Her div içeriği olabilir kullanılabilir alandan daha büyük olmak sonuna, yani div taşması ve kullanıcı kaydırma çubuklarını vermek gerekir.

Benim sorunum sorun her panelini o dikey yüksekliğini vermek nasıl sergiyi sahip olmam. Herhangi bir fikir?

Oluştur 09/12/2008 saat 17:57
kaynak kullanıcı
Diğer dillerde...                            


3 cevaplar

oy
5

Belki bir şeyler kaçırıyorum ama verilen:

  <div id="column">
    <div id="a" class="cell">A</div>
    <div id="b" class="cell">B</div>
    <div id="c" class="cell">C</div>
  </div>

Sorun ne:

    #column
    {
        height: 100%;
        width: 20%;
    }

    #column .cell
    {
        height: 31%;
        margin: 1%;
        background-color: green;
        overflow: auto;
    }
Cevap 09/12/2008 saat 18:11
kaynak kullanıcı

oy
1

Ben doğrudan cevap vermez ama bunun için bana downvote ummalı !!

Divs ciddiye bir şekilde dolmasını yapar Burada gördüğüm en büyük çerçeve büyük http://960.gs

Bu div için sabit boyutları ayarlamanızı sağlar ve aşağıya düzeni sığmaz div'leri sıçrar. Meyer'in Reset.css dahil orada css, içinde teknikler mükemmel.

Bu sadece css çalmak ve ızgara kullanmak bile herkes için öğrenme garanti etti.

Cevap 03/04/2009 saat 19:17
kaynak kullanıcı

oy
1

Aşağıdaki CSS içinde boneheaded hatayı düzelttik şimdi, IE7, Firefox 3 ve Google Chrome ile düzgün bir şekilde oluşturulup:

<html>
<head>
<style type="text/css">
#one {height: 33%; overflow: auto;}
#two {height: 33%; overflow: auto;}
#three {height: 33%; overflow: auto;}
</style>
</head>

<body>

<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

</body>

</html>
Cevap 09/12/2008 saat 18:11
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more