------------------------ h1 tab1 tab2 tab3 ------------------------ text text | photo text text | photo text text | photo text text | photo text text | photo text text | text text text text text text text text text text
在上面的两列布局中,文本浮动在右侧面板周围.通过右浮动右列可以轻松实现这一点,但是这需要将右列及其图像放在左列和html中的文本之前.
鉴于文本内容在页面下方的可能性(谁知道真的,但我不是冒险)可能会失去页面排名,如何在html右侧之前的左栏中获得相同的结果？
解决方法
我在参考线程中读到这些图像是幻灯片,这是否意味着你知道右边“浮动”块的宽度和高度？
如果是这样,下面的小提琴示例可能是一个选项,如果不是我认为没有将图像保留在源头中是不可能的.
如果是这样,它意味着首先在源中插入一个空div,将其标注为与图像/幻灯片放映区域匹配,然后将其浮动为“占位符”..然后相对于主要内容区域添加位置,并绝对定位实际图像/在占位符上幻灯片：
示例小提琴：HERE
HTML：
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="tabs">Tabs</div>
<div id="main">
<div id="ssholder"></div>
<div id="left">
<p> Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident,sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p> add loads more content!</p>
</div>
<div id="sshow">
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
</div>
</div>
</div>
CSS：
#wrapper {
width: 600px;
border: 1px solid #000;
}
#main {
position: relative;
border: 1px solid red;
}
#ssholder {
float: right;
width: 200px;
height: 300px;
}
#sshow {
position: absolute;
width: 200px;
height: 300px;
top: 0;
right: 0;
background: #eee;
}
#sshow img {
display: block;
}
如果没有在#sshow上显式设置,jQuery可以检测高度：
$(function() {
var sshowHeight = $('#sshow').height();
$('#ssholder').height(sshowHeight);
});
