0

我的框架以错误的顺序为我的布局吐出 html。我可以更改它,但对于其他媒体,顺序是正确的。目前我有一行简单的 javascript 来传输 html,但我想知道是否有 css 替代品。

这是简单的例子。第一个例子是它应该如何工作,第二个是我现在拥有的。我想知道是否可以在第二个示例中完成相同的布局,即不使用 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 指定的浮动行为在不添加至少一个 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>

现在,我们通过 , 放置文本data-placeholder:before然后#desired_main通过contentcss 属性。

这样,生成元素的高度将与 from 的高度完全相同#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;
}

适用于:

  • 互联网浏览器 8+
  • 火狐 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 回答