Возможно ли это размещение с помощью html/css?

Question

Я пытаюсь создать макет стиля журнала с текстом, обернутым вокруг большой цитаты посередине. Современные браузеры были бы в порядке. Любой, кто может отправить меня в правильном направлении?

Я прочитал о css regions. К сожалению, он работает только в нескольких версиях webkit, поэтому он не готов к производству.

Answer 1

Вы пробовали что-то вроде этого: http://www.jwf.us/projects/jQSlickWrap/ Это требует HTML 5 холст объект так, не может не поддерживаться IE ..

Answer 2

http://jsfiddle.net/hezj7/

HTML:

<div class="row"> 
    <div class="left-50"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
    <div class="right-50"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="left-33"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
    <div class="middle-33"> 
     <p>SOME HUGE CONTENT HERE</p> 
    </div> 
    <div class="right-33"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="left-50"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
    <div class="right-50"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
</div> 

CSS:

.row { 
    width: 100%; 
} 

.left-50 { 
    width: 48%; 
    float: left; 
    margin: 0 4% 0 0; 
    border: 1px solid red; 
    box-sizing: border-box; 
} 

.right-50 { 
    width: 48%; 
    float: left; 
    border: 1px solid orange; 
    box-sizing: border-box; 
} 

.left-33 { 
    width: 31%; 
    float: left; 
    margin: 0 3% 0 0; 
    border: 1px solid purple; 
    box-sizing: border-box; 
} 

.middle-33 { 
    width: 31%; 
    float: left; 
    margin: 0 3% 0 0; 
    border: 1px solid yellow; 
    box-sizing: border-box; 
} 

.middle-33 p { 
    font: 24px bold; 
} 

.right-33 { 
    width: 31%; 
    float: left; 
    margin: 0; 
    border: 1px solid blue; 
    box-sizing: border-box; 
}