Подтвердить что ты не робот

Раскладка газеты с двумя колонками и котировочной рамкой?

Я ищу способ создания макета газеты для веб-сайта, где содержимое разбивается на два столбца, но с кавычкой в ​​середине столбцов.

Я знаю, как сделать два столбца с помощью CSS3 с помощью

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

Но как мне создать поле цитаты посередине и есть ли способ, которым я "обертываю" содержимое внутри столбцов вокруг окна посередине?

Я прикрепил иллюстрацию того, что я имею в виду.
Представьте себе на этой иллюстрации, что текст в двух столбцах обернут вокруг окна посередине.

Newsletter Layout

4b9b3361

ОТВЕТЫ

Ответ 1

Вот решение, которое работает:

ДЕМО ЗДЕСЬ

Это обеспечит гибкость ваших столбцов. Тем не менее, ваша область цитаты должна быть фиксированной высотой/шириной. Если вы хотите отрегулировать область цитаты, измените ширину/высоту разделителей divs в начале каждого столбца div. Не изящное решение, но оно работает.

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>

Примечание. Это основано на решении peteris (которое не обертывалось вокруг цитаты div) ниже.

Ответ 2

Я предполагаю, что это неправильно, но...:

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

Ответ 3

Это может быть достигнуто, но... оно не является гибким, вам нужно будет настроить положение практически для любых изменений, которые вы вносите в текст.

DEMO

HTML

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

CSS Я добавил:

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

Ответ 4

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

Я изменил ответ @sean_mcgee, добавив некоторый JavaScript для разделения столбцов для вас. Просто поместите текст в div newspaperArticle и поместите свою цитату в поле JavaScript. Это плохо работает на маленьком экране, потому что слова длиннее пробела, так что вот полноэкранный пример: http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/, Единственная проблема заключается в том, что он может разделить фрагмент HTML отдельно, поэтому будьте осторожны.