0

私のフレームワークは、レイアウトに対して間違った順序で html を吐き出しています。変更することはできますが、他のメディアの場合は正しい順序です。現在、HTMLを転送するためのJavaScriptの簡単な行がありますが、CSSの代替案があるかどうか疑問に思っていました.

これが単純化された例です。最初の例はそれがどのように機能するか、2 番目は私が今持っているものです。2 番目の例で、JavaScript を使用せずに目的のバージョンで同じレイアウトを実現できるかどうかを知りたい

http://jsfiddle.net/SPgyA/1/

<div id="wrap">
    <div id="right" class="somediv">
        div right, dont know height in advance
    </div>
    <div id="main">
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
    </div>
</div>


<div id="desired_wrap">
      <div id="desired_main">
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
    </div>
    <div id="desired_right" class="somediv">
        div right, dont know height in advance
    </div>
</div>

</p>

JavaScript：

$("#desired_right").prependTo("#desired_wrap");

CSS

#wrap,#desired_wrap{
    width:200px;
    margin:10px;
    padding:10px;
    border:1px dashed grey;
}
#right{
    float:right;
}

#desired_right{
    float:right;
}


.somediv{
    color:red;
    width:100px;
    background-color:#eee;
}

</p>

4

2 に答える 2

1

ここでは、小さな追加の html 属性を追加することにより、CSS のみで HTML の順序を変更せずにこれを処理する方法を示します*:

*私の意見では、w3c で指定されたフローティング動作は、少なくとも 1 つの html 属性を追加しないとこの方法では機能しないため、これが機能する唯一の方法です。

HTML

<div id="desired_wrap">
    <div id="desired_main" data-placeholder="my box text">
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
    </div>
    <div id="desired_right" class="somediv">
        my box text
    </div>
</div>

ここで、 css プロパティを介して前に、をdata-placeholder介してテキストを配置しています。:before#desired_maincontent

このように、生成された要素の高さは#desired_right、同じテキストが含まれているため、 からの高さとまったく同じになります。

CSS

#desired_wrap{
    width:200px;
    padding:10px;
    position: relative;
}

.somediv {
    width: 100px;
}

#desired_main:before {
    content: attr(data-placeholder);
    float: right;
    width: 100px;
}​

#desired_right最初の実際の例のように、右上に絶対に配置すると、右にフロートがシミュレートされます。

CSS

#desired_right{
    position: absolute;
    top: 10px;
    right: 10px;
}

以下でうまく機能します：

  • Internet Explorer 8 以降
  • Firefox 3.6
  • クローム 17+
  • サファリ 5+

ライブデモ: http://jsfiddle.net/SPgyA/3/

于 2012-06-16T07:26:30.103 に答える
0

内側の.somedivを右上に揃える場合は、position：relativeおよびabsoluteを追加する必要があります。

#wrap,#desired_wrap{
    position:relative;
}

.somediv{
    position:absolute;
    top:0px;
    right:0px;
}

編集：

その変更により、テキストがdivの周りを流れなくなることに気づきました...

于 2012-06-15T15:33:21.713 に答える