Jak pozycjonować elementy CSS bezpośrednio pod sobą?

Wiem, że prawdopodobnie jest to rozwiązane pytanie, ale szukałem i nie mogłem znaleźć rozwiązania.Jak pozycjonować elementy CSS bezpośrednio pod sobą?

Spójrz. Mam podstawy strony internetowej. Nagłówek, polecana treść, główna treść i stopka. Chcę, aby główna treść była objęta polecanymi treściami, ale teraz jest za tym. Jak mogę sprawić, żeby pod spodem znalazła się?

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; 
}

Źródło

2013-07-26 Criesval

proszę pisać to, czego do tej pory ... – Dror

można podać swój kod tutaj? Odpowiedzią może być wyczyszczenie obu, naprawienie floata itd. Teraz zobaczę, że twój kod jest bardziej szczegółowy (HTML i CSS). – Thanos

Niestety brak kodu. Po zaktualizowaniu. – Criesval

Tworzenie div kontenera. Zawiera wszystko, czego potrzebujesz, niezależnie od tego, czy chcesz je ułożyć w pionie, czy w poziomie. Tak mniej więcej będzie wyglądać następująco:

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

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

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

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

A twój CSS byłoby

#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; 
}

Źródło

2013-07-26 02:08:50

To działa idealnie! Ale zamiast tworzyć nowy kontener, właśnie dodałem CSS do kontenera ciała. Czy napotkam jakiekolwiek problemy w przyszłości? – Criesval

Nie działa to, ale ogólnie jest bardziej konkretny, jest lepszy, ponieważ mając warstwy następnie to faktyczny dostawca kontenerów więcej elastyczności !! :) –

Dlaczego wypuściłeś elementy 'width: 100% '? @IntactDev, dość standardowym jest posiadanie wyraźnego "kontenera", którym manipulujesz w ciele. – Trojan

Jak pozycjonować elementy CSS bezpośrednio pod sobą?

Odpowiedz

Powiązane problemy