我有一个图像,我希望与div的一侧对齐.我还有段落需要与此图像并列.但是,它们没有足够的文本内容可以一直向下到达图像的高度.我所有段落下面的内容需要低于图像.
使用float:left的图像无法正常工作,由于容器DIV的图像与所需的段落旁边并没有浮动元素的高度响应.
使用position:relative; left:0px的图像也不起作用.有了这个,我已经修改display了段落,但它们总是在图像下面而不是在旁边.
h3 {text-align:center}
img {position:relative;left:0px}
p {display:inline-block;}<body>
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png"/>
<p>This paragraph should be next to the image.</p>
<p>This paragraph should also be next to the image.</p>
</div>
<div>
<h3>Another Header</h3>
<p>Everything from the above header and down should appear below the image.</p>
</div>
</div>
</body>
这是小提琴.
编辑
在回顾了这些答案之后,我找到了一个更优雅的解决方案:
h3 {clear:both; text-align:center}
img {float:left; margin-right:10px}
这需要明确的解决方案,使其更容易适用.
更新了演示中的 HTML ，并应用这些 CSS 类：
h3 {text-align:center; clear:both;}
img {float:left}
.inner-wrap p {display:inline;}
| 归档时间： |
|
| 查看次数： |
98 次 |
| 最近记录： |