这里是小提琴http://jsfiddle.net/NtMNE/
我想重复下面的代码块,只有在第二个块上,图像在右侧。以为会很简单,但有热门的路障......
<div class="wrap">
<div id="block1"
<p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic" ></p>
<h2 id="intro">
The best selection of cheese I've ever seen! Cannot wait for our next order!
</h2>
</div>
<div id="block2"
<p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic2" ></p>
<h2 id="intro2">
The best selection of cheese I've ever seen! Cannot wait for our next order!
</h2>
</div>
我认为你想要类似以下内容:
<div class="ex1">
<img src="http://s15.postimg.org/vl0o8vobf/cheese_owner.jpg" alt="Cheese Picture">
<h2>The best selection of cheese I've ever seen! Cannot wait for our next order!</h2>
</div>
.ex1 {
overflow: auto;
border: 1px solid lightgray;
}
.ex1 img {
float: right;
}
.ex1 h2 {
margin: 0;
font-size: 3em;
line-height: 1.25;
letter-spacing: -1px;
color: #2B9BD4;
}
观看演示:http://jsfiddle.net/audetwebdesign/LxDMs/
我稍微简化了 HTML。 图像会根据需要向右浮动,如果文本足够长,文本将在图像周围流动。
我调整了一些填充和边距,以获得更紧凑的外观。
我还设置了示例 2,演示如何将文本定位为图像下方的标题。
示例 2 的 CSS 如下所示:
.ex2 {
border: 1px dotted lightblue;
width: 200px;
}
.ex2 img {
display: block;
width: 100%;
}
.ex2 h2 {
margin: 0;
font-size: 1.5em;
line-height: 1.25;
letter-spacing: -1px;
color: #2B9BD4;
}
设置包装元素的宽度并缩放图像以适合。 然后,标题将填充父项的宽度并位于图像下方。
<div id="block2"
<p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic" ></p>
<h2 id="intro2">
</h2>