Cột và Hình ảnh trung tâm nội tuyến

Question

Tôi muốn tạo một cột văn bản 2 với một div ở trung tâm như dưới đây.

Tôi đang sử dụng mã này:

-moz-column-count: 2; 
-webkit-column-count: 2; 
column-count: 2; 

Khi tôi đặt một div trong lớp div, nó định dạng để đi vào hai cột. Làm thế nào để sửa lỗi này?

Answer 1

Sử dụng các CSS sau:

<style type="text/css"> 
    .container{ background:#00FF00;width: 844px;text-align:center; margin: 0px auto;border: 1px solid #CCCCCC;height: 450px;} 
    .columns {background:#FF0000; width: 400px;border: 1px solid #595959; height: 450px;text-align:left;float:left; padding: 10px;left:5%;} 
    .popup_middle_content{background:#FFFFFF; border: solid 1px black; position: absolute; left: 50%; top: 50%;background-color: white;z-index: 1; height: 50px; margin-top: -150px; width: 200px;margin-left: -100px; } 
</style> 

Và kiểm tra với những bên dưới Div:

<div class="container"> 
     <div class="columns">Left Paragraph contents...</div> 
     <div class="columns">Right Paragraph contents...</div> 
     <div class="popup_middle_content">CENTER DIV content...</div> 
    </div> 

Đó là tác phẩm cho tôi. Tôi hy vọng điều này sẽ giúp bạn.

Answer 2

Hãy thử tạo các lớp Div riêng cho mọi thứ và định vị lớp div cho div nơi bạn muốn. Không tạo thẻ Div, chỉ cần tạo các lớp học!

Answer 3

Bạn cần phải tạo ra một lớp riêng biệt cho

Chỉ cần kiểm tra bên dưới ví dụ

<div class="newspaper">enter code here 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis  nostrud exerci tation ullamcorper suscipit lo`enter code here`bortis nisl ut aliquip ex ea  commodo consequat. Duis autem vel eum iriure dolor in 
</div> 
<div class="newspaper"> 
Typi non habent claritatem insitam; est usus legentis in iis  qui facit eorum  claritatem. 
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
<div class=""> 
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
</div> 
</div> 

Answer 4

trả lời này để yêu cầu của bạn giữ cột css.

Chọn ý tưởng từ đây: http://css-tricks.com/float-center/ theo đề xuất của @ Josh.

Xem fiddle này được cập nhật của bạn: http://jsfiddle.net/aX47K/99/

Bí quyết là sử dụng css :before hoặc :after yếu tố giả trên mỗi cột (đại diện bởi các div), với chiều rộng cố định và chiều cao và nổi ngược lại. Điều này sẽ tạo ra một không gian giả mà sau đó chúng ta có thể điền vào với hình ảnh của chúng tôi (hoặc div khác) bằng cách sử dụng định vị tuyệt đối.

/* the overall wrapping div acting as newspaper */ 
div.paper { position:relative; } 

/* the div holding the columns */ 
div.wrap { 
    column-count:2; 
    text-align: justify; 
} 

/* the dummy space created from individual divs holding the content */ 
#col-1:before, #col-2:before { 
    content: ""; 
    width: 140px; 
    height: 160px; 
} 
#col-1:before { 
    float: right; 
} 
#col-2:before { 
    float: left; 
} 

/* the image will then be placed in the dummy space created above */ 
img { 
    width: 240px; 
    position:absolute; 
    top: 10%; left: 33%; 
} 

Tuy nhiên, xin lưu ý rằng phương pháp này vẫn là một hack.

Answer 5

Tôi tưởng tượng bạn đã thực hiện xong điều này nhưng tôi có một ví dụ ở đây có thể chứng minh là hữu ích. Có một chút sắc thái ở đây mà tôi không muốn giải thích trừ khi ai đó hỏi. Tôi nghĩ rằng với một liên lạc của jQuery, chúng tôi có thể đánh dấu nó xuống.

Đây là ví dụ Fiddle của tôi. Nó cũng đáp ứng tốt để bạn có thể mở rộng cửa sổ để thấy điều đó. Một lần nữa nó được kinda nhanh chóng thực hiện. Nếu bạn chọn một container đáp ứng chỉ cần tìm các điểm ngắt tinh tế.

img { 
width:auto; 
height:5em; 
} 

#right img { 
    padding:1.5em 1.5em 1em 0; 
} 

#left img { 
    padding:1.5em 0 1em 1.5em ; 
} 

#right { 
    float:left; 
    margin-left:-5.5em; 
} 

#left { 
    float:right; 
margin-right:-5.5em; 
} 

Fiddle