Question

我想实现以下布局。 2 divs

基本上1个div放在另一个里面 Div1的圆圈为背景图片。（div的大小各不相同）
我想定位Div2，因为我总是得到上面的布局

我尝试使用centering a div inside another ..didnt工作我必须为Div2指定顶部和左侧吗？我希望能够定义Div2维度Div1。

任何帮助。

编辑

使用以下样式和js

.circle
        {
            width: 176px;
            height: 176px;
            top: 0;
            left: 0;
            background: url('images/circle.png') no-repeat left top;
            display :block;
        }

.inner {
            position: absolute;
            height: 80px;
            margin: auto;
            overflow :hidden;
            white-space:normal;             
        }

Jquery :

//parent is the container c

    var $circle_div = $("<div>").attr({ id: "circle_" + id });
    $circle_div.addClass("circle");
    parent.append($circle_div);

    $circle_div.css({ "top": 100, "left": 200, position: 'absolute' });
    var $inner_div = $("<div>").attr({ id: "text_" + id });
    $inner_div.addClass("inner");
    $inner_div.html("text_circle_333333333333444444444444" + id);
    $circle_div.append($inner_div);

全部谢谢

Answer 1

不幸的是，凯尔的答案对于垂直居中的内部div没有任何作用。

使用CSS2.1几乎不可能进行液体垂直对齐。鉴于你的约束是外部div中有一个圆圈，就像div本身一样高，你需要使用Javascript来计算适合圆圈的内部div的绝对定位和尺寸。假设你完全给出外部的尺寸，并指定内部div的给定高度。

标记

<div id="outer">  
 <div id="inner">&nbsp;</div>
</div>

CSS

#outer { 
  position: relative; 
  width: 100px; 
  height: 100px;
  backgroud-image: blah
}
#inner {
  position: absolute;
  height: 60px;
}

Javascript（假设是JQuery）

// prepare for semi-intense math
var radius = $('#outer').width()/2;
var height = $('#inner').height();
var d = Math.sqrt(radius*radius - height*height/4);

$('#inner').width(2*d)
    .css('top', (radius - height/2) + 'px')
    .css('left', (radius - d) + 'px');

编辑：说明

我们需要的是计算inner.left（称之为 x ），inner.top（称之为 y ）和inner.width （称之为 w ）。这就是这个问题的样子，红色的值就是我们所追求的：

Circle maths

要注意，我们有一个原点（0,0）表示所有点的坐标。圆的半径等于outer.width/2（因为圆与此div一样高且长）。因此，在我们的坐标系中，div和圆的中心位于（ r ， r ）（ r = radius）。

首先我们可以从图中推导出y坐标，因为我们知道高度 h 。

y = r - h/2

在图中，我们所追求的点位于圆上，因此我们使用圆的方程并求解 x 。因此，给定中心的圆的等式（ r ， r ）和半径 r （记住高中数学）：

(x - r)^2 + (y - r)^2 = r^2
(x - r)^2 + (r - h/2 - r)^2 = r^2   --- replacing y
x = r ± sqrt(r^2 - 1/4*h^2)         --- solving for x

这个x实际上是两个不同的x，一个用于y坐标的每个点，取决于我们是否在答案中取+或 - 平方根。我们需要的是两者中较小的一个。内部div的宽度由这两个x之间的差值给出。

w = r + sqrt(r^2 - 1/4*h^2) - [r - sqrt(r^2 - 1/4*h^2)]
w = 2*sqrt(r^2 - 1/4*h^2)

Answer 2

试试这个：

<div id="outer">  
     <div id="inner">&nbsp;</div>
</div>


#outer {
    position: absolute;
    width: 100px /*width of image*/;
    height 100px /*height of image*/;
baackground-image: url(path-to-image/img.jpg);
}
#inner {
    position: relative;
    top: 100px /*whatever works*/
    width: 50%; /*or whatever width you want*/
    margin: 0px auto; */centers it horizontally*/ 
}

这会将div #inner完全放在外部div的中心。

EDITED 也垂直定位div，我第一次错过了，抱歉！

希望它至少有帮助。：）

Answer 3

将div2置于绝对位置，顶部和左侧相对定位div1。

DIV1 {位置：相对} DIV2 {位置：绝对的;顶部：**像素;左：** PX}

在div中放置和居中div

3 个答案:

编辑：说明