在右浮动列周围放置文本，左栏首先出现在html中 [英] Wrap text around right floated column where left column appears first in html

问题描述

  ------------------------ 
 h1 
 
 tab1 tab2 tab3 
 ------------------------ 
 text text | photo 
 text text | photo 
 text text | photo 
 text text | photo 
 text text | photo 
 text text | 
文本文本文本文本文本
文本文本文本文本文本
  

两列布局文本浮动在右面板周围。这通过右浮动右列很容易实现，但是这需要右列和它的图像被放置在左边列和html中的文本之前。

给定可能性（谁知道真的，但我不会因为机会）失去页面排名由于文本内容下降页面，我如何获得相同的结果与左侧的列在html之前的权利？ / p>

有关网站管理员的相关问题

解决方案

这些图像是幻灯片，这意味着你知道正确的浮动块的宽度和高度的参考线程？

如果所以下面的小提示示例可能

如果是这样，则意味着插入一个空 div首先在源，确定它匹配图像/幻灯片区域和浮动它正确的占位符..然后添加相对于您的主要内容区域的位置，并绝对定位实际图像/幻灯片占位符：

example fiddle：这里

---

根据注释的完整代码：

HTML：

[/ p>

 < div id =wrapper> 
< div id =header>< h1>标题< / h1>< / div> 
< div id =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>添加更多内容！< / p> 
< / div> 
 
< div id =sshow> 
< img src =alt =width =200pxheight =50px/> 
< img src =alt =width =200pxheight =50px/> 
< img src =alt =width =200pxheight =50px/> 
< img src =alt =width =200pxheight =50px/> 
< img src =alt =width =200pxheight =50px/> 
< img src =alt =width =200pxheight =50px/> 
< / div> 
 
< / div> 
< / div> 
  

CSS：

 code> #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; 
} 
  

jQuery可以检测高度，如果没有在 sshow ：

  $（function（）{
 var sshowHeight = $（' sshow'）。height（）; 
 $（'＃ssholder'）。height（sshowHeight）; 
}）; 
  

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

In the above two column layout the text is floating around the right panel. This is easily achieved by right floating the right column, however this requires that the right column and its images are placed before the left column and the text in the html.

Given the possibility (who knows really but I'm not up for taking a chance) of losing page rank due to text content being lower down the page, how can I achieve the same result with the left column before the right in the html?

Related question on webmasters

解决方案

I read in that referenced thread that these images are a slideshow, does that mean you know the width and height of the right "floated" block?

IF so the following fiddle example may be an option, if not I don't think it's possible without keeping the images first in source.

IF so, it means inserting one empty div first in source, dimensioning it to match the images/slideshow area and floating it right for a "placeholder".. then add position relative to your main content area, and absolutely position the actual images/slideshow over the placeholder:

example fiddle : HERE

---

full code as per comments :

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

jQuery to detect heights if not explicitly set on #sshow:

$(function() {
    var sshowHeight = $('#sshow').height();
    $('#ssholder').height(sshowHeight);
});

这篇关于在右浮动列周围放置文本，左栏首先出现在html中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！