标签: positioning

我试图将两个div放在父div的右侧,一个在另一个之上.像这样的东西:

 div#top 
|-------------------------------------||------------|
|div#parent                           ||div#menu    |
|                          |---------|||float:right |
|                          |div#up   |||            |
|                          |         |||            |
|                          |---------|||------------|
|                                     |
|                          |---------||
|                          |div#down ||
|                          |         ||
|                          |---------||
|-------------------------------------|

任何想法如何使用CSS？我不能在这里使用表格,因为在主页面(ASP.NET)中添加了div#up,在内容中添加了div#down.Div#parent是液体,有一些最小宽度设置,并且包含不应该被这些div重叠的内容,所以我认为position:absolute在这里也是不可能的.

还有一个细节:在div#parent的左侧和右侧,有两个div使用菜单左右浮动.所以添加清楚:左/右到div#向下浮动右边将它放在这些菜单之一...

我有一个div设置为css类float,浮点数为:

.float {
display:block; 
position:fixed; 
top: 20px;
left: 0px;
z-index: 1999999999;
}
* html .float {position:absolute;}

此类使元素保持在页面上的固定位置(*html部分使其在IE中工作).我正在使用javascript水平和垂直移动元素的位置.

我需要在javascript中获取div相对于浏览器窗口的绝对位置(div的浏览器窗口顶部和左侧有多少像素).现在,我使用以下内容:

pos_left = document.getElementById('container').offsetLeft;
pos_top = document.getElementById('container').offsetTop;

上面的代码适用于IE,Chrome和FF,但在Opera中,它们都返回0.我需要一个适用于所有这些浏览器的解决方案.有任何想法吗？

顺便说一句:跟踪javascript所做的更改是可能的,但由于性能原因,这不是我要寻找的解决方案.另外,我没有使用jquery.

在处理jQuery UI范围滑块时,我主要使用chrome进行调试.我需要让范围有一个限制所以我会抓住其中一个手柄的左侧位置,如下所示:

$el.css('left');

哪个会给我左边的位置百分比:84%.但是,当我在Firefox中测试时,它返回的值以像素为单位.

有谁之前经历过这个吗？基于在Firebug中查看DOM,Firefox确实识别基于百分比的左侧定位,但它似乎并未将其作为值返回.这是Firefox的默认行为吗？在IE中也是如此吗？

我试图让Divs随机出现在网页上的任何地方使用javascript.因此div出现然后消失,然后另一个div出现在页面上的其他地方然后消失,然后另一个div再次出现在页面上的另一个随机点然后消失,依此类推.我不确定如何生成像素的随机单位或用于生成随机位置的技术.

我怎么做？这是我的代码:

var currentDivPosition = myDiv.offset(),
    myDivWidth = myDiv.width(),
    myDivHeight = myDiv.height(),
            var myDiv = $('<div>'),
    finalDivPositionTop, finalDivPositionLeft;

myDiv.attr({ id: 'myDivId', class: 'myDivClass' }); // already defined with position: absolute is CSS file.

// Set new position     
finalDivPositionTop = currentDivPosition.top + Math.floor( Math.random() * 100 );
finalDivPositionLeft = currentDivPosition.left + Math.floor( Math.random() * 100 );

myDiv.css({ // Set div position
  top: finalDivPositionTop,
  left: finalDivPositionLeft
});

$('body').append(myDiv);

myDiv.text('My position is: ' + finalDivPositionTop + ', ' + finalDivPositionLeft); 

myDiv.fadeIn(500);

setTimeout(function(){

  myDiv.fadeOut(500); …

如何使用css 创建元素position:absolute并且动态高度占据垂直空间？我可以使用容器和显示器的技巧吗？

我有一个GridPane1个字母的标签.

这是一张图片:

图片http://s1.directupload.net/images/121010/xu8o79sr.jpg

这是代码:

int charSpacing = 1;
int charsInWidth = 28;
int charsInHeight = 16;

double charWidth = 15;
double charHeight = 20;

GridPane gp = new GridPane();
gp.setAlignment(Pos.CENTER);

Label[] tmp = new Label[charsInHeight*charsInWidth];

String text = "W";
int currArrPos = 0;

for(int y = 0; y < charsInHeight; y++) {
    HBox hbox = new HBox(charSpacing);

    for(int x = 0; x < charsInWidth; x++) {
        tmp[currArrPos] = new Label(text);
        tmp[currArrPos].setTextFill(Paint.valueOf("white"));

        tmp[currArrPos].setMinHeight(charHeight);
        tmp[currArrPos].setMinWidth(charWidth);
        tmp[currArrPos].setMaxHeight(charHeight);
        tmp[currArrPos].setMaxWidth(charWidth);

        tmp[currArrPos].setStyle("-fx-border-color: white;");
        hbox.getChildren().add(tmp[currArrPos++]); …

我有2个div,父母和孩子,我希望孩子左侧(左边界)将在父母的中心.

为什么这段代码不起作用？这left: 50%对孩子来说是行不通的.

<div id="outher">
    <div id="inner">

    </div>
</div>

CSS:

#outher {
   width: 1000px;
   height: 1000px;
   background-color: #ccc;
}

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   left: 50%;
}

演示http://jsfiddle.net/vrse2/5/

我想将div放在另一个div中.

这是css的相关片段(cssdesk上的完整示例):

        .textblock-container {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        div.textblock {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px solid black;
            position: absolute;
            text-align: center;             
            background: rgb(0, 150, 0); /* Fall-back for browsers that don't
                                support rgba */
            background: rgba(0, 150, 0, .5);
        }

以及html的相关片段:

    <div id='blockdiv1' class='textblock-container'>
        <div id='blockdiv2' class='textblock'><span>foo (NW)</span></div>
        <div id='blockdiv3' class='textblock'><span>bar (NE)</span></div>
        <div id='blockdiv4' class='textblock'><span>baz (SW)</span></div>
        <div id='blockdiv5' class='textblock'><span>quux (SE)</span></div>
    </div>

问题是foo/bar/baz/quux块是相对于浏览器窗口定位的,而不是它们的父元素.

我做错了什么,我该如何解决？

我有菜单项,如:Row1 Row2 .. RowN,我希望它们不要那么宽 - 这就是为什么包括休息(最大宽度)

我有这个HTML:

<div>
 <ul>
  <li>Row1</li>
  <li>Row1 Row2 Row3</li>
  <li>Row1</li>
  <li>Row1 Row 2</li>
 </ul>
</div>

用这个CSS:

/* MENU */

.menudiv {padding-left:10px; border-bottom: 1px solid #d0db88;}

ul.menu
{                 
    list-style-type: none;
    min-width: 1050px;
    position: relative;
    left:10px;
    display: block;
    height: 45px;       
    margin: 0;
    padding: 0;
}

ul.menu li
{    
    float: left;
    margin: 0;
    padding: 0;
}

ul.menu li a
{    
    float: left;    
    text-decoration: none;
    padding: 9px 12px 0;
    font-weight: bold;
    max-width:130px;
}

实际:

+--------------------+
|Row1 Row1 Row1 Row1 | …

好的,所以这是父div:

#left {
    width: 50%;
    height: 100%;
    background-color: #8FD1FE;
    float: left;
    opacity:0.75;
    filter:alpha(opacity=75);
    -webkit-transition: all .45s ease;  
    -moz-transition: all .45s ease; 
    transition: all .45s ease; }

这就是div里面的div:

#reasons {
background-image:url('arrow1.png');
background-repeat: no-repeat;
height: 94px;
width: 400px;
margin: 0 auto 0 auto; }

我已经尝试了一些不同的方法,但我似乎无法保持第二个div居中并坚持到第一个div的底部.