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要素をドキュメントの最後に移動しますか？

位置：絶対はコースの解決策になりますが、画像の高さを緩めると、一連のように見える画像チェーンが作成されます。

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 に答える