1

我有很多这样的邮寄文件：

<p>...</p>
<img/>
<p>...</p>
<p>...</p>
<img/>
<img/>
<p>...</p>
<p>...</p>
<img/>
<p>...</p>
<p>...</p>
<img/>

我试图通过 CSS收集看起来像这样的 IMG 元素：

<img/>
<img/>
<img/>
<img/>
<img/>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>

"Float:left" 仅将 IMG 移动到前一个 P 元素的开头。如果没有 JS，有没有办法像 CSS 那样以编程方式收集 IMG 元素？或者以另一种方式将 P 元素移动到文档末尾？

Position:absolute 将是一个解决方案，但随后我松散了图像高度，使图像链看起来像一个系列..

4

3 回答 3

2

对的，这是可能的 ：）

对于位于下方的段落，我们必须为容器提供所有元素的边距顶部高度，这里我使用了父正文

再次，这有效。但对性能不利

http://jsfiddle.net/TJU2w/

img {
    position:absolute;

    height: 100px;
    width: 100px;
    background: blue;
}
p { background: grey; }

img:nth-of-type(1){
    top: 0;
    left: 0;
}
img:nth-of-type(2){
    top: 110px;
    left: 0;
}
img:nth-of-type(3){
    top: 220px;
    left: 0;
}
img:nth-of-type(4){
    top: 330px;
    left: 0;
}
img:nth-of-type(5){
    top: 440px;
    left: 0;
}

body {
    margin-top: 550px;

}
于 2013-02-25T23:15:34.517 回答
2

只要您的图像是段落的兄弟，您就可以使用 Flexbox 来执行此操作。

http://codepen.io/cimmanon/pen/htJqA

.container {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.container p {
  -moz-box-ordinal-group: 2;
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

但是，这在任何早于 IE10 的 IE 中都不起作用。 http://caniuse.com/#feat=flexbox

于 2013-02-25T23:46:50.553 回答
0

如果没有 javascript，就不可能更改文档的层次结构。

您可以做的是用 更改所有位置position:relative;，但这需要做很多工作，而且不能通用。

于 2013-02-25T22:40:10.780 回答