将文本环绕在右侧浮动列周围，其中左侧列在 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

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

如何在 html 中实现左列在右列之前的相同结果？

站长相关问题

Answer 1

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

如果下面的小提琴示例可能是一个选项，如果不是，我认为如果不首先将图像保留在源代码中，这是不可能的。

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

小提琴示例：这里

根据评论的完整代码：

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

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

Answer 4

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

让文本内容环绕元素只能使用

float

 来完成，并且由于事先不知道图像的宽度和高度，我们必须使用 JavaScript。我认为最简单的方法是：

float: right;
```
 来定位图像。
```

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

JavaScript 就像

一样简单

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

如果宽度和高度始终相同

我们可以很容易地使用 CSS 来伪造它，方法是使用

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 周围使用

position: relative;

进行包装 div

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 中首先出现

问题描述投票：0回答：5

5个回答

小提琴示例：这里

最新问题

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

问题描述 投票：0回答：5

5个回答

小提琴示例：这里

最新问题

问题描述投票：0回答：5