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

在上面的两列布局中，文本浮动在右侧面板周围。通过右浮动右列可以轻松实现这一点，但是这需要将右列及其图像放在左列和html中的文本之前。

考虑到由于文本内容在页面下方较低而失去页面排名的可能性（谁知道真的但我没有抓住机会），我怎样才能在右边的左栏中获得相同的结果HTML？

示例小提琴：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;
}

jQuery如果未在#sshow上明确设置，则检测高度：

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

Answer 2

这适用于IE6。将其浮动left并将width设置为它。您的侧边栏部分获得margin-left必须与浮动部分的总宽度相同（注意边距，边框和填充，因为它们也计入总宽度）。

JSfiddle：http://jsfiddle.net/easwee/reXaT/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .content {width:800px;margin:0 auto;background:#ccc;}
    .content-text {float:left;width:500px;background:green;}
    .content-sidebar {margin-left:500px;background:red;}
.clear {clear:both;height:1px;line-height:1px;font-size:1px;}
    </style>
</head>
<body>
<div class="content">
<h1>Winrar text</h1>
    <div class="content-text">
    Texte
    </div>
    <div class="content-sidebar">
    asdfasdf
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

Answer 3

更新：

我在文本div之后移动了图像div。如果图像的大小是动态的，您可以使用jQuery动态设置它

jsFiddle link

Answer 4

如果您不知道图像元素的宽度和高度

文本内容环绕元素只能使用float完成，并且由于图像的宽度和高度事先未知，我们必须使用javascript。我认为最简单的方法是：

在图片之前使用文本提供HTML。
使用Javascript在文本之前移动图像。
使用简单的float: right;定位图片。

这样你就不会失去网页排名（搜索引擎会看到正确的HTML），用户将拥有所需的布局。

javascript就像

var image = document.bodocument.getElementById('imageContainer')
var text = document.getElementById('textContainer')
text.parentNode.insertBefore(image, text)

如果宽度和高度始终相同

我们可以使用pseudo-element

#wrapper{
    position: relative;
}
#textContainer:before {
    content: '';
    display: block;
    width: 200px;
    height: 200px;
    float: right;
    margin: 0 0 1em 1em;
}
#imageContainer{
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}

这里我们在textContainer之前创建一个假的200x200元素，并使用它来为我们使用绝对定位放置的imageContainer节省空间。为了使绝对定位起作用，你需要一个包含textContainer和ImageContainer的包装器div position: relative;

Answer 5

为什么不以所有文本出现在所有图像之前的方式编写html。类似的东西：

<div id="MainWrapper">
        <div id="LeftFloatedText">
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
        <div>
        <div id="LeftFloatedImages">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
        </div>
    </div>

在右侧浮动列周围环绕文本，其中左列首先出现在html中

5 个答案:

示例小提琴：HERE

如果您不知道图像元素的宽度和高度

如果宽度和高度始终相同