Bố cục báo với hai cột và một hộp báo giá được căn giữa?

Question

Tôi đang tìm cách tạo bố cục báo cho trang web nơi nội dung được chia thành hai cột nhưng có hộp báo giá ở giữa các cột.

tôi biết làm thế nào để làm cho hai cột bằng CSS3 với

-moz-column-count: 2; 
-moz-column-gap: 10px; 
-webkit-column-count: 2; 
-webkit-column-gap: 10px; 

Nhưng làm thế nào để tôi tạo hộp ngoặc kép ở giữa và có cách nào mà tôi “quấn” nội dung bên trong các cột xung quanh hộp ở giữa?

Tôi đã đính kèm một minh họa về ý của tôi.
Hãy tưởng tượng trong hình minh họa này rằng văn bản trong hai cột được bao quanh hộp ở giữa.

Answer 1

Tôi đoán đó là sai nhưng ...:

<style> 
#one { 
    float:left; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#two { 
    float:right; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#three { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-top:-150px; 
    margin-left:-100px; 
    border:1px solid; 
    width:200px; 
    height:200px; 
} 
</style> 
<div id="one">ONE</div> 
<div id="three">3</div> 
<div id="two">two</div> 

Answer 2

Nó có thể đạt được, nhưng ... nó không linh hoạt, bạn sẽ phải tinh chỉnh vị trí cho hầu như bất kỳ sự thay đổi bạn làm cho văn bản.

DEMO

HTML

<div class='newspaper'> 
    <img src='http://img259.imageshack.us/img259/8049/birmancat.jpg'> 
    <p><!-- paragraph text --></p> 
     <!-- nine more paragraphs --> 
</div> 

CSS Tôi đã thêm:

.newspaper { 
    position: relative; 
    width: 580px; 
    padding: 10px; 
    margin: 0 auto; 
    box-shadow: 1px 1px 5px; 
    column-count: 2; 
    column-gap: 20px; 
    font-size: 12px 
} 
p { margin: 0 0 10px; } 
p:nth-child(3):before, p:nth-child(8):before { 
    width: 145px; 
    height: 200px; 
    content: ''; 
} 
p:nth-child(3):before { 
    float: right; 
} 
p:nth-child(8):before { 
    float: left; 
} 
.newspaper img { 
    position: absolute; 
    z-index: 2; 
    top: 85px; left: 50%; 
    margin: 0 -150px; 
} 

Answer 3

Dưới đây là một giải pháp mà hoạt động:

DEMO HERE

Điều này sẽ giúp cho cột của bạn linh hoạt. Tuy nhiên, khu vực báo giá của bạn sẽ phải là chiều cao/chiều rộng cố định. Nếu bạn muốn điều chỉnh khu vực báo giá, hãy thay đổi chiều rộng/chiều cao của các điểm đệm spacer ở đầu mỗi div cột. Không phải là một giải pháp thanh lịch, nhưng nó hoạt động.

CSS:

#one { 
    float:left; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#two { 
    float:right; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#three { 
    position: absolute; 
    left:50%; 
    top:100px; 
    margin-left:-300px; 
    border:1px solid; 
    width:600px; 
    height:200px; 
    background: maroon; 
    color: white; 
} 

HTML:

<div id="one"> 
    <div style="float: right; height: 80px; width: 10px;"></div> 
    <div style="float: right; height: 210px; width: 300px; clear: both;"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div id="three">Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. </div> 
<div id="two"> 
    <div style="float: left; height: 80px; width: 10px;"></div> 
    <div style="float: left; height: 210px; width: 300px; clear: both;"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 

Chú ý: Đây xây dựng dựa trên giải pháp Peteris (mà không quấn quanh div quote) dưới đây.

Answer 4

http://jsfiddle.net/iansan5653/xbfYD/4/

tôi sửa đổi câu trả lời @ sean_mcgee bằng cách thêm một số hoạt Javascript để chia cột cho bạn. Chỉ cần đặt văn bản trong div newspaperArticle và đặt báo giá của bạn trong trường JavaScript. Nó không hoạt động tốt trên màn hình nhỏ vì các từ dài hơn không gian, vì vậy đây là ví dụ toàn màn hình: http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/. Vấn đề duy nhất là nó có thể tách một thẻ HTML ra, vì vậy hãy cẩn thận.