此佈局可能與HTML/CSS？

Question

我想創建一個雜誌式的佈局，並在中間的大報價周圍環繞文字。現代瀏覽器只會很好。任何人都可以讓我朝正確的方向發展？

我已閱讀約 css regions。不幸的是，它僅適用於少數webkit版本，因此它不適合生產。

Answer 1

你有沒有嘗試過這樣的事情：http://www.jwf.us/projects/jQSlickWrap/ 它需要這麼可能不是由IE支持的HTML 5 Canvas對象..

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