Question

当图片和文字在单独的div中时，如何使用文字环绕图像制作图像？

我重新创建了以下场景：

http://codepen.io/vincentccw/full/yatsr/

第一部分是我在设计样式时遇到问题，第二部分是我想要实现的目标。

我无法调整HTML，因为它实际上是一个响应式布局的摘录，它需要设置像这样的div ....它可能吗？

Answer 1

在div或段落中使用图像，并指定图像以左右对齐水平和垂直空间。

一些示例代码：

  <img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg" border="0" align="left" hspace="10" />

FIDDLE DEMO

Answer 2

您的修改后的代码位于：ImageDivInsideTextFlow

HTML

 <h1>My current setup</h1>

<div class="template-g">
  <div>

  </div>
  <div>
    <h4>Unique Rooftop Bar, Bali</h4>
    <p>
      <figure><div class="fakeImage"></div>
      <figcaption>Photo: Unique Rooftop Bar</figcaption>
    </figure>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>

     <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>     <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>
    <p class="articleHighlight">Drink in the view</p>
  </div>
</div>

<hr />
<h1>What I want to achieve</h1>

<div class="template-h">

  <div>

    <figure><div class="fakeImage"></div>
      <figcaption>Photo: Unique Rooftop Bar</figcaption>
    </figure>

    <h4>Unique Rooftop Bar, Bali</h4>
    <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>

     <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>
         <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>
    <p class="articleHighlight">Drink in the view</p>
  </div>
</div>

CSS

  head,body{
  width:100%;
  height:100%;
}

*{
  margin:0;
  padding:0;
}

hr{
  margin:20px 0; 
}

.fakeImage{
  width:50%;
  height:200px;
  background:red;
  float:left;
  display:inline-block;
}


.template-g{
  width:100%;
  overflow:hidden;
}

.template-g>div{
  float:left;
}

.template-g>div:first-child{/*width for image*/
  width:30%
}

.template-g>div:last-child{
  width:70%
}


.template-h>div{
  width:100%
}

.template-h figure{
  width:600px;
  float:left;
}

Answer 3

我终于得到了一些可行的东西！

它使用伪元素。

.yourDivWithALotOfText:before {
    content:"";
    padding-left: 100px;
    padding-bottom: 100px;
    float:left;
}

确保所有元素都设置为：

display: inline;
position: absolute;

警告：padding-left和padding-bottom应手动设置。

演示：http://jsfiddle.net/thauwa/utYkZ/

Answer 4

因此您的图片位于＆lt; div＆gt;中。所以给那个DIV一些id并使用这个css #divid {float:left} 它有效吗？

使图像浮动，文字环绕图像？

4 个答案: