align div bên cạnh một sử dụng lề: 0 auto

Đây là lần đầu tiên tôi tham gia diễn đàn này và cố gắng làm rõ ràng nhất có thể, tôi gặp vấn đề khi tạo trang web nhỏ cho riêng mình, cụ thể với tiêu đề. Im cố gắng để tạo ra một trang có một wrapper của trung tâm 1024px (margin: 0 auto;) và tôi muốn 2 divs, trên cả hai mặt của wrapper này, nơi tôi có thể sử dụng một hình ảnh làm nền. css hiện tại của tôi trông như thế này:align div bên cạnh một sử dụng lề: 0 auto

body, html  
background: url(../images/bg.jpg); 
background-repeat: no-repeat; 
background-position: top center; 
margin: 0; 
padding: 0; 
} 
#wrapper 
margin: 0 auto; 
width: 1024px; 
} 
#header { 
width: 1024px; 
height: 254px; 
background-image: url(../images/header2.png); 
background-repeat: none; 
position: relative; 
} 
#header_right { 
width: 50%; 
right: 0; 
background-image: url(../images/header_right2.png); 
position: absolute; 
height: 254px; 
} 
#header_left { 
width: 50%; 
left: 0px; 
background-image: url(../images/header_left.png); 
position: absolute; 
background-position: right; 
margin-left: -512px; 
height: 254px; 
}

và html của tôi trông giống như:

<body> 
<div id="header_right"></div><!--End header right!--> 
<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
</body>

gì tôi đang cố gắng để đạt được là phải có một tiêu đề mà tiếp tục ở cả hai bên trái và bên phải (cả tiêu đề sử dụng các nền khác nhau), trong trường hợp này nó hoạt động ở bên trái, vì im sử dụng lề âm, vì tôi sử dụng 50% chiều rộng và chính xác một nửa của trình bao bọc (-512px), công trình này, nhưng nếu tôi cố gắng sử dụng margin âm ở bên phải (margin-right: -512px) điều này sẽ mở rộng trang bên phải với một 512px thêm, đó không phải là ý định của tôi.

Tôi đã googling cả ngày nhưng dường như không tìm thấy câu trả lời cho câu hỏi của mình, cũng cố gắng tạo 3 div với float: left, nhưng không thể tìm ra cách làm 1 ở trung tâm với chiều rộng 1024px và phần còn lại 100% chiều rộng, nếu có ai có thể giúp tôi hiểu điều đó sẽ thực sự được đánh giá cao.

Trân trọng

Nguồn

2012-10-24 Geo

Xem xét sử dụng [jsfiddle] (http://jsfiddle.net) trong bài viết trong tương lai. Nó dễ dàng hơn để gỡ lỗi và hiển thị kết quả với nó. – ShadowScripter

cảm ơn shadowcripter, bị bệnh giữ cho rằng trong tâm trí cho thời gian tiếp theo! – Geo

Tôi không hoàn toàn chắc chắn làm thế nào bạn muốn nó trông giống như, nhưng tôi sẽ cho nó một shot.
Nếu tôi đang đi, có lẽ bạn có thể cung cấp cho tôi một sơ đồ các loại?

Trong mọi trường hợp, ví dụ được đưa ra bên dưới không sử dụng mã cụ thể của bạn, nhưng nó sẽ cung cấp cho bạn ý tưởng về cách thực hiện.

Kết quả: first example

Các trái và tiêu đề phải là "vô hạn", trong đó họ luôn luôn điền chiều rộng toàn bộ trang.
Tiêu đề ở giữa bao trùm phần còn lại.Nếu bạn có hình nền, bạn có thể sử dụng background-position để định vị chúng sao cho chúng phù hợp với cạnh trái và phải của phần đầu giữa.

Mã | JSFiddle example

HTML

<div class='side_wrapper'> 
    <div class='left_header'></div><div class='right_header'></div> 
</div> 
<div class='header'></div> 
<div class='content'> 
    Content here 
</div>

CSS

.header, .side_wrapper, .left_header, .right_header{ 
    height: 100px; 
} 

.header, .content{ 
    width: 400px; 
    margin: 0 auto; 
} 

.side_wrapper{ 
    width: 100%; 
    white-space: nowrap; 
} 

.left_header, .right_header{ 
    width: 50%; 
    display: inline-block; 
} 

.left_header{ 
    background-color: blue; 
} 

.right_header{ 
    background-color: lightblue; 
} 

.header{ 
    position:absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -200px; 
    background-color: red; 
} 

.content{ 
    background-color: green; 
    text-align: center; 
}

Nguồn

2012-10-24 14:23:54 ShadowScripter

cảm ơn rất nhiều, tôi đã xóa thư trước đó vì tôi đã tìm thấy câu trả lời trước đây của mình, tôi sẽ làm cho nó hoạt động ngay bây giờ, cảm ơn rất nhiều! – Geo

@GMolenaar Tuyệt vời! Chào mừng bạn đến với stackoverflow! – ShadowScripter

Bạn muốn có hai tiêu đề ra khỏi wrappper và sang phải không? Nếu im ngay, hãy thử này:

<body> 

<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
<div id="header_right"></div><!--End header right!--> 
</body>

và:

display: inline; float: left;

trong mỗi phần tử (header-trái, tiêu đề bên phải, wrappper), và thoát ra khỏi lề âm

Nguồn

2012-10-24 13:14:50 Toping

hi hòm, cảm ơn câu trả lời của bạn, tôi đã thử điều đó, nhưng sẽ không sửa chữa nó, tôi nên để lại chiều rộng: 50% tho? và về vị trí của 3 divs thì sao? – Geo

thử mà không có vị trí và chiều rộng ... – Toping

hi hòm, cảm ơn phản hồi nhanh của bạn, đã hoạt động! câu hỏi cuối cùng là cả hai bên không có chiều rộng cụ thể và nên được miễn là trang, wrapper được đặt trên 1024px, cả hai bên cần phải là 'vô hạn' (như chiều rộng như màn hình của bạn) – Geo

Trong bạn divs sử dụng float: left; điều này sẽ có nghĩa là trong vòng một wrapper miễn là có đủ không gian họ sẽ nổi bên cạnh nhau ví dụ css:

#divWrapper 
{ 
width:500px; 
float:left; 
background-color:red; 
} 
#divLeft 
{ 
width:250px; 
float:left; 
background-color:blue; 
} 
#divRight 
{ 
width:250px; 
float:left; 
background-color:green; 
}

Html

<div id "divWrapper"> 
    <div id = "divLeft">content here</div> 
    <div id = "divRight">content here</div> 
</div><!--this is the end of the wrapper div -->

Một công cụ thực sự tốt để sử dụng cho các thao tác css là Firebug trong Firefox https://getfirebug.com/

nếu bạn muốn có một trung tâm div thử điều này: http://jsfiddle.net/kzfu2/1/

Nguồn

2012-10-24 13:27:44 anna

hi! cảm ơn cho câu trả lời của bạn anna, vấn đề là có cần phải có 3 divs và chỉ có 1 với một chiều rộng cố định (1024px), các bên trên cả hai mặt cần phải được miễn là trang dài – Geo

Xin chào bạn có nghĩa là chiều cao hoặc chiều rộng bằng dài? tôi đã cập nhật này http://jsfiddle.net/kzfu2/5/ fiddle để các wrapper có một chiều rộng cố định và các div bên trong là tỷ lệ phần trăm của nó hoặc div trung tâm có một chiều rộng cố định với hai divs ở phía bên http://jsfiddle.net/kzfu2/6/ – anna

align div bên cạnh một sử dụng lề: 0 auto

Trả lời

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