Question

我正在尝试完成这样的事情： enter image description here

似乎无法模仿上面中心图像被文本包围的那个。我尝试使用花车，但缺少一些东西，我不知道是什么。

这就是我现在所拥有的：

enter image description here

这是我的代码：

section{
 text-align: center;
}

section p{
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
-o-column-count: 3;
column-count: 3;
text-align: justify;
}

section article:first-child{
float: left;
}

section article:last-child{
float: right;
}

Answer 1

好吧，你无法实现真正你的布局。但是你可以稍微破解它。

对于每列，您可以设置间隔物，填充物和其他间隔物。

第一个垫片从顶部预留空间，只是为了将填充物推到所需位置。填料确实保留了空间。并且重新定位的间隔消耗剩余空间，以便我们进入另一列。

您需要在容器上设置高度

.base {
  width: 100%;
  height: 1000px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}


.pushtop {
  background-color: rgba(200,0,0,0.2);
  width: 10px;
  height: 17%;
  float: right;
  clear: both;
}

.pushbottom {
  background-color: rgba(200,0,0,0.2);
  width: 10px;
  height: calc(83% - 200px);
  float: right;
  clear: both;
}

.insert {
  background-color: lightblue;
  height: 200px;
  clear: both;
  margin: 0px 10px;
}
.insertleft {
  width: 100px;
  float: right;
}

.insertcenter {
  width: 100%;
  float: right;
}

.insertright {
  width: 100px;
  float: left;
}

.container {
  width: 735px;
  position: relative;
}

.image {
  position: absolute;
  border: solid blue 1px;
  width: 485px;
  height: 200px;
  left: 123px;
  top: 170px;
  }

<div class="container">
<div class="image"></div>
<div class="base">

<div class="pushtop"></div>
<div class="insert insertleft"></div>
<div class="pushbottom"></div>
<div class="pushtop"></div>
<div class="insert insertcenter"></div>
<div class="pushbottom"></div>
<div class="pushtop"></div>
<div class="insert insertright"></div>
<div class="pushbottom"></div>
<p>Another 4-storey structure will soon be under construction to add new classrooms and laboratories for the High School and Grade School.</p> 
 
<p> Part of the reason for this attention to the North Campus is to help FU’s marketing strategy for the high school in response to the implementation of the K to 12 Program.  First, we want to attract more enrollees. Second, we invest in the facilities in our aim to increase not just the quality of our education but to boost our enrollment capacity from 700 students to 1500 students. And of Course, thanks to our new solar panel installation, we will also be providing all the new classrooms with air conditioning for those sweltering months.</p> 

<p>Corporate Social Responsibility or CSR, as viewed by the University, should also have a significant space in the academe's achievements and obligations.</p>

<p>Estudio Damgo, for instance, is now on its third iteration of touching people's lives through sustainable and life-changing architecture. Its buildings and designs, since its first project in 2013, serve as prototype structures that cater to the various needs of society. The University sees Estudio Damgo as a catalyst for creating a transformed, more developed, and more meaningful way of living not just in Dumaguete but through out the Philippines. Read more about the current project here. (note to Entheos; link the word “here” to full Estudio Damgo article)</p>

    <p>In terms of agriculture, FU's Aquaponics sets the example in the use of completely natural and organic farming techniques, which enhance not only the environment's safety but boost farmers' production capabilities and livelihood as well. Aquaponics provides agriculturists the answer to sustainable food production and a sustainable ecosystem for both fish and plants. For more specifics on our organic farm click here. (Note to Entheos: Link the word “here” to full organic farming article)</p>

<p>A forest and wildlife protection program called “Ayungon Forest Reserve” has also been pushed by the College of Arts and Sciences in partnership with local government units and the Department of the Environment and Natural Resources (DENR). The program calls for protecting the natural resources of the Reserve from causes of declining population, degradation of wildlife habitat, deterioration of soil and river quality, and the cave’s carrying capacity.</p>
 
<p>The College of Business Administration (CBA), on the other hand, is seriously pursuing a strong “Entrepreneurship Program” that caters to all levels of participants from students to MSMEs (Micro, Small, Medium Enterprises). In fact, the CBA in partnership with DTI will soon launch an “Entrep Hub”—a one-stop business center for start-up entrepreneurs—during the University Expo in which high school students will compete for the best business plan. The prize will be an Incubation Program for the winning plan to become a real business.</p>
 
<p>The University Expo, formerly the Digital Expo, of the College of Computer studies is a major University event that showcases innovative technology. The annual event, which includes robotic challenges, quiz bowls, film festivals, etc., is an avenue for students from different academic institutions to participate in and learn from the latest IT breakthroughs.</p>

<p>Barangay constituents also have the opportunity to learn computer skills such as basic PC operations, Internet use, word processing, spreadsheet and presentation through the university's Computer Literacy Program for adopted barangays.</p>

<p>Moreover, “The Queue” coffee shop, run by the College of Hospitality Management ‘s Culinary Arts students, draws customers from in and outside the campus because of its delicious food and beverages.</p>
 

 
</div>
  </div>

请注意，填料和垫片元件不应该是可见的。我给出了背景和宽度（在推送元素的情况下），以便您可以看到它是如何工作的

Answer 2

现在的CSS，还不能（可靠地）做到这一点。但是，有一个CSS Shapes模块可以做到这一点。

http://demosthenes.info/blog/898/Wrapping-Text-Around-A-Curved-Image-With-CSS-Shapes

仅在Chrome和Safari中支持：

http://caniuse.com/#feat=css-shapes

Answer 3

我创建了自己的方法，使你的风格图像在页面中心，所以我做了以下方法

注意：请在您的页面中查看此演示文稿，但它不起作用

         div{
                margin: 15px
            }
            p{
                float:left;
                margin: 10px;
            }
            .left{
                float:left;
                width:30%;
            }
            .centre{
                display: inline-block;
                width:30%;
            }
            .right{
                float:right;
                width:30%;
            }
            .right, .centre, .left p{
                text-align:justify
            }

<div class="left">
            <p>Another 4-storey structure will soon be under construction to add new classrooms and laboratories for the High School and Grade School.</p> 
            <p>In terms of agriculture, FU's Aquaponics sets the example in the use of completely natural and organic farming techniques, which enhance not only the environment's safety but boost farmers' production capabilities and livelihood as well. Aquaponics provides agriculturists the answer to sustainable food production and a sustainable ecosystem for both fish and plants. For more specifics on our organic farm click here. (Note to Entheos: Link the word “here” to full organic farming article)</p>
            <p>Have you also heard of Greyhound Events and Tours? Well, it is Foundation University’s student-run functional travel agency that caters to the travel needs of both the FU community and outside clients.</p>
            <p>Integrating CSRs in the various programs is our chance to give back to the community as well as gain the respect of the members of the society, young and old. It also helps garner the public's appreciation for the importance of community involvement by producing tangible projects everybody can benefit from.</p>
            <p>Expanding the University’s Information Technology (IT) to meet the demands of a digital age is another factor in FU’s “micro” to “macro” plan. Aside from the existing iPad program, the University is determined to create digital classrooms that can be accessed by local towns like Bacong, Dauin and Zamboangita. There is also a movement to encourage students, even at the high school level, to learn useful skills such as computer programming so they can be competitive in an IT driven world.</p> 
            <p>On the infrastructure side, FU is also updating the “bare bones” of FUs communication network to fiber optic cables and high-end routers and equipment. You can read a comprehensive explanation of these updates in a separate article in this issue of CQ here.
                (Note to Entios: link the word “here” to full IT article)</p></div>
        <div class="centre">
            <p> Part of the reason for this attention to the North Campus is to help FU’s marketing strategy for the high school in response to the implementation of the K to 12 Program.  First, we want to attract more enrollees. Second, we invest in the facilities in our aim to increase not just the quality of our education but to boost our enrollment capacity from 700 students to 1500 students. And of Course, thanks to our new solar panel installation, we will also be providing all the new classrooms with air conditioning for those sweltering months.</p> 
            <p>Estudio Damgo, for instance, is now on its third iteration of touching people's lives through sustainable and life-changing architecture. Its buildings and designs, since its first project in 2013, serve as prototype structures that cater to the various needs of society. The University sees Estudio Damgo as a catalyst for creating a transformed, more developed, and more meaningful way of living not just in Dumaguete but through out the Philippines. Read more about the current project here. (note to Entheos; link the word “here” to full Estudio Damgo article)</p>
            <img src="http://animalia-life.com/data_images/cat/cat4.jpg" style="height:300px;width:100%;" alt="">
            <p>The College of Business Administration (CBA), on the other hand, is seriously pursuing a strong “Entrepreneurship Program” that caters to all levels of participants from students to MSMEs (Micro, Small, Medium Enterprises). In fact, the CBA in partnership with DTI will soon launch an “Entrep Hub”—a one-stop business center for start-up entrepreneurs—during the University Expo in which high school students will compete for the best business plan. The prize will be an Incubation Program for the winning plan to become a real business.</p>
            <p>The University Expo, formerly the Digital Expo, of the College of Computer studies is a major University event that showcases innovative technology. The annual event, which includes robotic challenges, quiz bowls, film festivals, etc., is an avenue for students from different academic institutions to participate in and learn from the latest IT breakthroughs.</p>
            <p>Aside from all the projects mentioned above, our overview of the 2015 Master Plan wouldn’t be complete if we didn’t tell you about one more core component.</p> 
        </div>
        <div class="right">
            <p>Corporate Social Responsibility or CSR, as viewed by the University, should also have a significant space in the academe's achievements and obligations.</p>
            <p>A forest and wildlife protection program called “Ayungon Forest Reserve” has also been pushed by the College of Arts and Sciences in partnership with local government units and the Department of the Environment and Natural Resources (DENR). The program calls for protecting the natural resources of the Reserve from causes of declining population, degradation of wildlife habitat, deterioration of soil and river quality, and the cave’s carrying capacity.</p>
            <p>Barangay constituents also have the opportunity to learn computer skills such as basic PC operations, Internet use, word processing, spreadsheet and presentation through the university's Computer Literacy Program for adopted barangays.</p>
            <p>Moreover, “The Queue” coffee shop, run by the College of Hospitality Management ‘s Culinary Arts students, draws customers from in and outside the campus because of its delicious food and beverages.</p>
            <p>It needs to be emphasized that at the core of the FU Master Plan is the campaign for everyone’s right to quality education. This advocacy, started by Foundation University’s founder Dr. Vicente G. Sinco, has been passed down to each new FU president. It is why FU is proud to be known as a school that caters to students with financial challenges to hurdle as they work towards their educational goals.</p>
        </div>

如果这项工作很开心

https://jsfiddle.net/x0ugLbo4/

如何在居中的图像周围放置文字？

3 个答案: