当图片和文字在单独的div中 时,如何使用文字环绕图像制作图像?
我重新创建了以下场景:
http://codepen.io/vincentccw/full/yatsr/
第一部分是我在设计样式时遇到问题,第二部分是我想要实现的目标。
我无法调整HTML,因为它实际上是一个响应式布局的摘录,它需要设置像这样的div ....它可能吗?
答案 0 :(得分: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" />
答案 1 :(得分:1)
您的修改后的代码位于: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;
}
答案 2 :(得分:1)
我终于得到了一些可行的东西!
它使用伪元素。
.yourDivWithALotOfText:before {
content:"";
padding-left: 100px;
padding-bottom: 100px;
float:left;
}
确保所有元素都设置为:
display: inline;
position: absolute;
警告:padding-left
和padding-bottom
应手动设置。
答案 3 :(得分:0)
因此您的图片位于&lt; div&gt;中。所以给那个DIV一些id并使用这个css #divid
{float:left}
它有效吗?