不改变 HTML 结构:
<div id="container">
<header>
<h1>This is the Heading Which May be Long and Span Lines</h1>
</header>
<section>
<div class="thumb">
<img></img>
</div>
<div class="content">
<p>Content</p>
<p>continues</p>
<p>and wraps around the thumb</p>
</div>
</section>
</div>
我需要对其进行样式设置,以便 img.thumb
向左浮动,而 header h1
悬卡在其右侧,并且可以换行。 h1
应该左对齐:
+------------+ Heading Text which May Be Long and
| | Thus would Span Lines
| thumb |
| | Content
+------------+ continues
and wraps around the thumb.
布局(即标题和内容的宽度)应流畅地适应容器的宽度。 (拇指是固定宽度的。)
有什么方法可以在不改变元素顺序的情况下使用 CSS3 实现这一点?我可以通过固定右列的宽度来做到这一点,但是有没有办法指定“使用 float 右侧的剩余空间作为宽度”? (没有javascript,less等)
在这里 fiddle :http://jsfiddle.net/agRx3/1/
最佳答案
由于拇指的宽度是固定的,所以可以使用position: absolute
来固定图片的位置。然后,标题和内容可以具有 margin-left
,它略大于拇指宽度
fiddle :http://jsfiddle.net/SJvav/
编辑:要让内容环绕边距,让图像和文本 float:left
并给图像一个负边距,这样它就在 h1
旁边> http://jsfiddle.net/SJvav/2/
关于css - 如何用CSS反转标题和正文的 float 顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11381095/