CSS elemanlarını doğrudan birbirinin altına nasıl yerleştirirsiniz?

Muhtemelen böyle çözülmüş bir sorunun olduğunu biliyorum, ama aradım ve bir çözüm bulamadım.CSS elemanlarını doğrudan birbirinin altına nasıl yerleştirirsiniz?

Bakın. Bir web sitesi için temel bilgilerim var. Bir başlık, öne çıkan içerik, ana içerik ve altbilgi. Ana içeriğin öne çıkan içeriklerin altına düşmesini istiyorum, ancak şu anda bunun arkasında. Onu hemen altından nasıl yapabilirim?

HTML:

<html> 
<head> 
    <link href="style.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
    <div class="navigation"></div> 
    <div class="content-featured"></div> 
</body>

CSS:

html, body { 
margin: 0; 
padding: 0; 
} 

.navigation { 
float: left; 
padding: 15px 0; 
min-width: 100%; 
opacity: .48; /* layer alpha */ 
background-color: #1f1f1f; /* layer fill content */ 
height: 20px; 
} 

.content-featured { 
height: 384px; 
background-image: -moz-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: -o-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: -webkit-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
} 

.content-main { 
height: 308px; 
}

kaynak

2013-07-26 Criesval

o ana kadar ... – Dror

burada kodunuzu sağlayabilir ne gönderilmesi için lütfen olacaktır: Yani kabaca böyle görünürdü? Cevap her ikisi de temizlemek için, float vb. Düzeltmek olabilir. Kodunuzu görmek için daha spesifik olmalısınız (HTML ve CSS) – Thanos

Hiçbir kod için özür dilerim. Yayın güncellendi. – Criesval

bir kapsayıcı div oluşturun. Bu, ister dikey ister yatay olsun isteyin, istediğiniz her şeyi içerir.

<div id="container"> 
    <div class="header"> 
    </div> 

    <div class="navigation"> 
    </div> 

    <div class="left-sidebar"> 
    </div> 

    <div class="content"> 
    </div> 
</div>

Ve CSS

#container { 
width:960px; 
} 
.header, .navigation { 
width: 100%; 
float:left; 
height: 80px; 
} 
.sidebar { 
width: 200px; 
float:left; 
min-height: 500px; 
} 
.content { 
width: 760px; 
float: left; 
min-height: 500px; 
}

kaynak

2013-07-26 02:08:50

Bu mükemmel çalışıyor! Ancak, yeni bir kap yapmak yerine CSS'yi gövde konteynerine ekledim. Gelecekte herhangi bir sorunla karşılaşır mıyım? – Criesval

Çok işe yarayan, ancak genellikle daha spesifik olmak daha iyidir, çünkü sonra katmanları olması, gerçek bir konteyner sağlayıcıları daha fazla esneklik sağlar! :) –

Neden "width: 100%" öğeleri yüzdün? @IntactDev, vücutta işlem yaptığınız açık bir "kapsayıcı" sahip olmak için oldukça standarttır. – Trojan

CSS elemanlarını doğrudan birbirinin altına nasıl yerleştirirsiniz?

cevap

İlgili konular