css - 将文本环绕在右侧 float 列周围，其中左侧列首先出现在 html 中

Question

------------------------
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

在上面的两列布局中，文本在右侧面板周围 float 。这很容易通过向右浮动右列来实现，但是这需要将右列及其图像放在左列和 html 中的文本之前。

考虑到由于文本内容位于页面下方而导致页面排名下降的可能性(谁知道真的，但我不想冒险)，我如何才能在右列之前获得相同的结果html？

Related question on webmasters

Answer 1

我在那个引用的线程中读到这些图像是幻灯片，这是否意味着您知道右侧“ float ” block 的宽度和高度？

如果下面的 fiddle 示例可能是一个选项，如果不是，我认为如果不将图像放在源中是不可能的。

如果是这样，这意味着首先在源代码中插入一个空 div，对其进行尺寸调整以匹配图像/幻灯片区域并将其 float 到右侧以作为“占位符”..然后添加相对于您的主要位置内容区域，并将实际图像/幻灯片绝对定位在占位符上:

fiddle 示例: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);
});