此视图的CSS和HTML

Question

我剩下2个标签并找不到解决方案。

我已经做了这么多的HTML和CSS

<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;"> 
 

 
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" /> 
 
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" /> 
 
</div>

Answer 1

试试这个方法：

1. 注意到垂直对齐的护理（因为它出现在你的设计）
2. 内容高度根据相邻列
3. 没有浏览器的问题，以及
4. 调整使用CSS的红色和绿色 - 因此无需图像

.parent-container { 
 
    width: 320px; 
 
} 
 

 
.box { 
 
    border: 2px solid #000; 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 

 
.box__cell { 
 
    display: table-cell; 
 
    width: 50%; 
 
    vertical-align: middle; 
 
    padding: 0 15px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.circle { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    border: 2px solid #000; 
 
} 
 

 
.b-red { 
 
    background: red; 
 
} 
 

 
.b-green { 
 
    background: green; 
 
} 
 

 
.t-green { 
 
    color: green; 
 
} 
 

 
.text-right { 
 
    text-align: right; 
 
} 
 

 
.list-item li { 
 
    display: block; 
 
} 
 

 
.list-inline li { 
 
    display: inline-block; 
 
}

<div class="parent-container"> 
 
    <div class="box"> 
 

 
    <div class="box__cell box__cell--left"> 
 

 
     <div id="incoming_call"> 
 

 
     <ul class="list-item"> 
 
      <li class="t-green">Incoming Call</li> 
 
      <li><b>00: 05</b></li> 
 
     </ul> 
 

 
     </div> 
 

 
    </div> 
 
    <div class="box__cell box__cell--left"> 
 

 
     <ul class="list-inline text-right"> 
 
     <li class="circle b-red"> 
 
     </li> 
 
     <li class="circle b-green"> 
 
     </li> 
 

 
     </ul> 
 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 2

我会把图像position:absolute DIV中这样

#incoming_call{ 
 
    border: 2px solid black; 
 
} 
 
#call{ 
 
    color:green; 
 
} 
 
#images{ 
 
    position:absolute; 
 
    top:0px; 
 
}

<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;"> 
 
    <div id="call">call from 7040</div> 
 
    <div id="time">0:01</div> 
 
    <div id="images"> 
 
    <img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Reject" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" /> 
 
    <img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" /> 
 
    </div> 
 
</div>