Làm cách nào để bạn định vị các phần tử CSS trực tiếp với nhau?

Tôi biết có thể là một câu hỏi được giải quyết như thế này, nhưng tôi đã tìm kiếm và tôi không thể là một giải pháp.Làm cách nào để bạn định vị các phần tử CSS trực tiếp với nhau?

Vì vậy, hãy xem. Tôi có những điều cơ bản cho một trang web. Tiêu đề, nội dung nổi bật, nội dung chính và chân trang. Tôi muốn nội dung chính rơi vào nội dung nổi bật, nhưng ngay bây giờ nó nằm phía sau nó. Làm thế nào tôi có thể làm cho nó đi ngay bên dưới nó?

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

Nguồn

2013-07-26 Criesval

Hãy gửi những gì bạn đã cho đến nay ... – Dror

Bạn có thể cung cấp mã của bạn ở đây? Câu trả lời có thể là để xóa cả hai, sửa chữa phao vv vvBạn phải xem mã của mình mặc dù cụ thể hơn (HTML và CSS) – Thanos

Xin lỗi vì không có mã. Đã cập nhật bài đăng. – Criesval

Tạo một div container. Điều này giữ tất cả mọi thứ bạn muốn, cho dù bạn muốn ngăn xếp chúng theo chiều dọc hoặc chiều ngang. Vì vậy, khoảng thời hạn sẽ trông như thế này:

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

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

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

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

Và CSS của bạn sẽ là

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

Nguồn

2013-07-26 02:08:50

Điều này hoạt động hoàn hảo! Nhưng, thay vì tạo một container mới, tôi vừa thêm CSS vào vùng chứa cơ thể. Tôi có gặp phải bất kỳ vấn đề nào trong tương lai không? – Criesval

Nope cũng hoạt động, nhưng nói chung là cụ thể hơn là tốt hơn, bởi vì có các lớp sau đó thì nhà cung cấp container thực tế linh hoạt hơn !! :) –

Tại sao bạn nổi các phần tử 'width: 100%'? @IntactDev, nó khá chuẩn để có một "container" rõ ràng mà bạn thao tác bên trong cơ thể. – Trojan

Làm cách nào để bạn định vị các phần tử CSS trực tiếp với nhau?

Trả lời

Các vấn đề liên quan