CSS 3 Sütun şamandıra (sabit 2, 1 dinamik)

I 3 parçadan yapılmış olan bir başlık tasarım var.CSS 3 Sütun şamandıra (sabit 2, 1 dinamik)

sayfa akışkan olması gerekir: min-width:940px; max-width:1200px;

başlığının ilk iki parça giderilecektir boyutu:

left  middle  right 
<---------><---------><-----------------> 
    134px  183px  (Fill the remaining space)

Ben sayfanın boyutuna bağlı olarak değiştirmek için sağ kısmını istiyorum Şimdiye kadar yaptığım şeyi yapıştırırım ama problemim boşluğu tamamıyla doldurmaktır.

HTML:

<div class="main"> 

<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div>

CSS: Ben yorum yapmak yeterli itibar yok

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; } 
div.right { height: 191px; background-color: #ff0000; margin-left: 317px; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div> 
</div> 
</body> 
</html>

kaynak

2009-07-18 Anonymous

Aradaki boşluğu sayfanın sonuna mı yoksa sayfanın sonuna mı? – random

bu deneyin doğruluğunu onaylamak önceki cevap. aşağıdaki gibi bunu tweaked, sabit sıvı sabit: Ben biraz farklı bir şey arıyordu

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { height: 191px; background-color: #ff0000; margin-left: 134px; margin-right: 183px;} 
div.right { float: right; width: 183px; height: 191px; background-color:#ffff00; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="middle"></div> 
</div> 
</body> 
</html>

önemli noktalar fark: - marjları, şamandıra ile, kenarları üst üste vücut önlemek için kullanılır. - benim durumumda, html içinde div sırasını tersine çevirmek gerekir - aslında "orta" için bir div gerekmez. Bunu yapmayan bir site, quirksmode blogudur (yalnızca "gövde" öğesi üzerinde doğrudan kenar boşluklarını ayarlar): http://www.quirksmode.org/blog/archives/browsers/index.html

kaynak

2009-07-18 10:45:39 cletus

spot, çok teşekkürler! –

Codepen: http://codepen.io/clouddueling/pen/wyIcC –

, ama sadece istedim:

.main{ 
     margin:auto; 
     min-width:940px; 
     max-width:1200px; 
     background-color:#000; 
    } 

    .left{ 
    float: left; 
    width: 134px; 
    height: 191px; 
    background-color:#0000ff; 
    } 
    .middle{ 
    float: left; 
    width: 183px; 
    height: 191px; 
    background-color:#ffff00; 
    } 

    .right{ 
    float: left; 
    width: 60%; 
    height: 191px; 
    background-color:#ff0000; 
    }

kaynak

2010-10-19 05:29:32

CSS 3 Sütun şamandıra (sabit 2, 1 dinamik)

cevap

İlgili konular