Разметить этот пример (изображение внутри).

Question

Разметить этот пример (изображение внутри).

0

Я не могу понять, как реализовать этот пример в HTML и CSS. Я пробовал много способов, но никто не работал. Есть идеи?

Высота текстового блока является динамической. Размер изображения (круг в этом случае) фиксирован.

http://i.stack.imgur.com/aI4kM.png

Alexey Kosov 18 апр. 2014, в 09:51

Источник

Теги:

html

css

vertical-alignment

3 ответа

0

В функции document.onReady получите высоту div, разделите ее на 2 и добавьте margin-top к изображению, как если бы это ваш html

 <div id="mdiv">
     <div id="sdiv">
         <p>ONE</p>
         <p>TWO</p>
        <p>THREE</p>
     </div>
     <img id="theimg" src="float:left;" src=""/>
    </div>

В документе уже есть что-то подобное

$("#theimg").attr("margin-top",$("#mdiv").height()/2);

Не может быть идеальным вопросом, но он работает

Bandeshor Makai 18 апр. 2014, в 06:25

0

DEMO

HTML

<div class="left">
    <p>resize browser to see efect</p>
</div>
<div class="circle"></div>

CSS

.left {
    width:calc(100% - 50px);
    height:50%;
    background-color:#000;
    position:fixed;
    left:0px;
    top:0;
    bottom:0;
    margin:auto;
    z-index:1;
    text-align:center;
    color:#fff;
}
.circle {
    height:100px;
    width:100px;
    border-radius:50px;
    background-color:#F00;
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    z-index:99;
}

4dgaurav 18 апр. 2014, в 05:14

Ещё вопросы

Reinder Wit · Accepted Answer · 2014-04-18T06-27-00.000Z

иметь div, расположенный в правой части каждой коробки, 100% высоты, с прозрачным фоном для красной точки:

HTML

<div class="box">
    <p>line 1</p>
    <p>line 2</p>
    <div class="circle"></div>
</div>
<div class="box">
    <p>line 1</p>
    <p>line 2</p>
    <p>line 3</p>
    <p>line 4</p>
    <p>line 5</p>
    <div class="circle"></div>
</div>

CSS

.box {
    background-color: #eee;
    width: 300px;
    border:solid 1px green;
    border-radius:4px;
    position:relative;
    padding:10px; 
    margin-bottom:15px
}
.circle {
    position:absolute; 
    width: 50px;
    height: 100%;
    top:0; right:-30px;
    background:transparent url('somepng') no-repeat 0 50%
}

ознакомьтесь с этой рабочей скрипкой