浮动得太远 [英] Floating Too Far Right

问题描述

我有一个记录管理Web应用程序，该应用程序在一个屏幕上显示一个主记录，并且AJAXes将编辑器动态地构建到编辑器div中，我使用JQuery使其可拖动.那行得通.

I've got a record management web application which displays a master record on one screen and AJAXes dynamically built editors into an editor div, which I've used JQuery to make draggable. That works.

即使div不是窗口，但我认为使其表现得更像是一个好主意，所以我在关闭"按钮中进行了编码.结构如下:

Even though the div isn't a window, I thought it might be a nice idea to make it act a bit more like one, so I coded in a "close" button. The structure looks like this:

<div id="editor">
  <div id="draghandle" />
  <div id="closebutton" />
  <div id="editorbody" />
</div>

Editorbody的尺寸可变，这取决于人们想要输入的内容.

Editorbody is variable-dimension depending on what people are trying to enter.

Draghandle的宽度设置为编辑器的100％.在CSS中将Closebutton设置为float:right.

Draghandle's width is set at 100% of editor. Closebutton is set up in CSS as float:right.

我的问题是，在IE6和IE7中，关闭按钮向右浮动得太远了.无论我将编辑器div拖动到何处，它始终靠在窗口的右边缘.在Firefox和Safari中，看起来就像我期望的那样-窗口与编辑器主体一样宽，而closebutton位于右上角.

My problem is that, in IE6 and IE7, the close button floats too far right. It's always against the right edge of the window, no matter where I drag the editor div around to. In Firefox and Safari it looks like I expected it to - the window is as wide as editorbody and closebutton sits in the top right corner.

我并不特别喜欢float:right，只是在寻找一种设置CSS的方法，该方法将在所有浏览器中给我相同的结果.有什么想法吗?

I'm not particularly attached to float:right, just looking for a way to set up the CSS that'll give me the same result across all browsers. Any ideas?

这是我想在jsbin上做的样机(谢谢，redsquare)

Here's a mockup of what I'd like to do on jsbin (thanks, redsquare)

示例代码

我正在使用法律上敏感的信息，因此无法提供该应用程序的屏幕截图.但是，我已经拍摄了一些照片，并屏蔽了文本和界面，只保留了窗口结构.

I'm working with legally sensitive information so I can't provide screenshots of the app. I have, however, taken some shots and blocked out the text and interface, leaving only the window structure.

在IE7中的外观

在firefox中的外观3

推荐答案

您可能要考虑只使用 JQuery对话框，因为它是预制的，并且样式已经可以跨平台使用.

You may want to consider just using a JQuery Dialog instead since its premade and the styles already work cross platform.

这篇关于浮动得太远的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！