Я хотел добиться следующего макета. 2 divs

В основном 1 div внутри другого.
Div1 имеет кружок как фоновое изображение . (Размер div меняется)
Я хочу расположить Div2 так, чтобы я всегда получал вышеуказанный макет

Я пытался использовать центрирование div внутри другой..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);

Спасибо всем

2
Amitd 27 Авг 2010 в 11:41

3 ответа

Лучший ответ

К сожалению, ответ Кайла не повлияет на центрирование внутреннего 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 (назовите его < EM> со ) . Вот как выглядит эта проблема, значения в красном - это то, что мы ищем:

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)
4
Ezequiel Muns 30 Авг 2010 в 13:03

Положение div2 абсолютно с верхом и слева внутри относительно позиционированного div1.

Div1 {позиция: относительная} div2 {позиция: абсолютная; наверх : ** точек ; Слева: ** точек }

0
ArK 27 Авг 2010 в 07:53

Попробуй это:

<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.

ИЗМЕНЕНО , чтобы расположить div вертикально, я пропустил это в первый раз, извините!

Надеюсь, это хотя бы поможет. :)

1
Kyle 27 Авг 2010 в 09:53