如何在没有对齐问题的情况下覆盖图像上的文

时间:2017-02-16 11:59:01

标签: html css

由于位置绝对和相对属性,我无法在桌面和移动设备上显示它。日期框文本始终未对齐。感谢任何帮助。谢谢。

enter image description here

这是我的代码。

#include <stdio.h>
#include <string.h>
#include <stdlib.h>

#define SIZE 10

int main ( void) {
    char i = '\0';
    int n = 0;
    int result = 0;
    float scores[SIZE] = { 0.0f};

    printf ( "enter scores\n");
    while ( n < SIZE && ( scanf("%c",&i) == 1)) {//scan a character
        if ( i == '\n') {
            break;//newline so leave loop
        }
        else {
            ungetc ( i, stdin);//replace the character in input stream
        }
        if ( ( result = scanf ( "%f", &scores[n])) == 1) {//scan a float
            printf ( " score[%d] entered as %f\n", n, scores[n]);
            n++;
        }
        if ( result == 0) {
            printf ( "please enter a number\n");//could not scan the input as a float
        }
        while ( ( result = getchar ( )) != '\n') {//clean the input stream
            if ( result == EOF) {
                fprintf ( stderr, "problem EOF\n");
                return 1;
            }
        }
        printf ( "enter score[%d]\n", n);
    }
    return 0;
}

移动

enter image description here

3 个答案:

答案 0 :(得分:1)

这应该有用。

.event-picture-block { position: relative; }
.event-date-box { position: absolute; bottom: 10%; left: 10%; }

答案 1 :(得分:1)

你应该减小字体大小并减小宽度。

答案 2 :(得分:1)

我做了一个小提琴。我猜测了尺寸,所以考虑到这一点。

https://jsfiddle.net/feov9x2h/1/

<div class="container">
   <div class="innerBox">
     <span class="date">NOV 20</span>
   </div>
   <div class="innerBox">
     <span class="date">NOV 20</span>
   </div>
   <div class="innerBox">
     <span class="date">NOV 20</span>
   </div>
   <div class="innerBox">
     <span class="date">NOV 20</span>
   </div>
   <div class="innerBox">
     <span class="date">NOV 20</span>
   </div>
   <div class="innerBox">
     <span class="date">NOV 20</span>
   </div>
</div>

.innerBox {
  width: 200px;
  height: 200px;
  display: inline-block;
  background: green;
  padding:0px;
  margin:0px;
  float: left;
  position: relative;
  border: 1px solid black;
}
.date{
  padding: 10px 5px;
  background:white;
  position: absolute;
  left: 10px;
  bottom: 10px;
 }