Question

我试图在带有背景图像的弹性项目的底部放置一些文本。但我似乎没有动摇。

.fourthcontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto;
}

.flex41 {
  width: 320px;
  height: 280px;
  margin: 6px;
  background-image: url("../challenge/img/romance.jpg");
  position: relative;
}

<div class="fourthcontainer">
  <div class="flex41">
    <span class="textimage"><h2 >Romance for two</h2></span>
  </div>
  <div class="flex42">
    <span class="textimage"><h2 >Feast for your visitors</h2></span>
  </div>
  <div class="flex43">
    <span class="textimage"><h2 >Picnic</h2></span>
  </div>
  <div class="flex44">
    <span class="textimage"><h2 >Grill party</h2></span>
  </div>
  <div class="flex45">
    <span class="textimage"><h2 >Celebration</h2></span>
  </div>
  <div class="flex46">
    <span class="textimage"><h2 >Kid´s party</h2></span>
  </div>
</div>

除图像外，其他类具有相同的属性。提前致谢

Answer 1

我相信这是你想要实现的目标？由于所有.flex-child子项都具有相同的样式。我添加了一个名为.fourthcontainer{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; align-content: space-around; width: 1000px; margin: 0 auto; } .flex-child { width: 320px; height: 280px; margin: 6px; position: relative; } .flex-child h2 { position: absolute; display: block; left: 10px; bottom: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .flex41, .flex42, .flex43, .flex44, .flex45 { background-image: url("http://lorempixel.com/320/280/"); }的新类。在这里摆弄https://jsfiddle.net/ocfr7ksd/

＆＃13;

<div class="fourthcontainer">
    <div class="flex-child flex41">
        <span class="textimage"><h2 >Romance for two</h2></span>
    </div>
    <div class="flex-child flex42">
        <span class="textimage"><h2 >Feast for your visitors</h2></span>
    </div>
    <div class="flex-child flex43">
        <span class="textimage"><h2 >Picnic</h2></span>
    </div>
    <div class="flex-child flex44">
        <span class="textimage"><h2 >Grill party</h2></span>
    </div>
    <div class="flex-child flex45">
        <span class="textimage"><h2 >Celebration</h2></span>
    </div>
</div>

＆＃13;

public class Employee implements Comparable<Employee>
{
   private String id;
   private String name;
   private double salary;
   private String department;
   private String position;
   private int service;
   public Employee(String id, String name, double salary,String 
                   department,String position,int service)
{
  this.id = id;
  this.name = name;
  this.salary = salary;
  this.department = department;
  this.position = position;
  this.service = service;
}
public void setid(String id)
{
   this.id = id;
}
public void setname(String name)
{
   this.name = name;
}
public void setsalary(double salary)
{
   this.salary = salary;
}
public void setdepartment(String department)
{
   this.department = department;
}
 public void setposition(String position)
{
   this.position = position;
}
public void setservice(int service)
{
   this.service = service;
}
public String getid()
{
   return id;
}
public String getname()
{
   return name;
}
 public double getsalary()
{
   return salary;
}
 public String getdepartment()
{
   return department;
}
public String getposition()
{
   return position;
}
 public int getservice()
{
   return service;
}
public int compareTo(Employee emp)
{
   return (this.service - emp.service);
}
public String toString()
{
  return "Id: " + this.id+ ", Name= " + this.name+ ", Salary= " + this.salary+ ", Department: " + this.department+ ", Postion: " + this.position+ ",Years Served= " + this.service;
}
}


import java.util.ArrayList;
import java.io.*;

class HeapSort
{
private int [] currArray;
private int maxSize;          
private int currentSize;
private int currIndex;

HeapSort(int mx)            
{
maxSize = mx;
currentSize = 0;
currArray = new int[maxSize];  
}

//buildheap
public boolean buildHeap(int [] currArray)
{
int key = currIndex;
if(currentSize==maxSize)
 return false;
int newNode = key;
currArray[currentSize] = newNode;
siftUp(currArray , currentSize++);
return true;
}

//siftup
public void siftUp(int [] currArray , int currIndex)
{
int parent = (currIndex-1) / 2;
int bottom = currArray[currIndex];

while( currIndex > 0 && currArray[parent] < bottom )
{
 currArray[currIndex] = currArray[parent];  
 currIndex = parent;
 parent = (parent-1) / 2;
}  
currArray[currIndex] = bottom;
}

//siftdown
public void siftDown(int [] currArray , int currIndex)
{
int largerChild;
int top = currArray[currIndex];       
while(currIndex < currentSize/2)       
{                               
 int leftChild = 2*currIndex+1;
 int rightChild = leftChild+1;

 if(rightChild < currentSize && currArray[leftChild] < currArray[rightChild] 
)
    largerChild = rightChild;
 else
    largerChild = leftChild;

 if( top >= currArray[largerChild] )
    break;

 currArray[currIndex] = currArray[largerChild];
 currIndex = largerChild;            
 }  
 currArray[currIndex] = top;            
 }

 //remove max element
 public int removeMaxElement(int [] currArray)          
 {                           
 int root = currArray[0];
 currArray[0] = currArray[--currentSize];
 siftDown(currArray , 0);
 return root;
 }  

 //heapsort
 private void _sortHeapArray(int [] currArray)
 {
 while(currentSize != 0)
 {
 removeMaxElement(currArray);
 }
 }

 public void sortHeapArray()
 {
 _sortHeapArray(currArray);
 } 

 //hepify
 private int[] heapify(int[] currArray) 
 {
 int start = (currentSize) / 2;
 while (start >= 0) 
 {
 siftDown(currArray, start);
 start--;
 }
 return currArray;
 }

 //swap
 private int[] swap(int[] currArray, int index1, int index2) 
 {
 int swap = currArray[index1];
 currArray[index1] = currArray[index2];
 currArray[index2] = swap;
 return currArray;
 }

 //heapsort
 public int[] _heapSort(int[] currArray) 
 {
 heapify(currArray);
 int end = currentSize-1;
 while (end > 0) 
 {
 currArray = swap(currArray,0, end);
 end--;
 siftDown(currArray, end);
 }
 return currArray;
 }
 public void heapSort()
 {  
 _heapSort(currArray);

 }
 }



 import java.util.*;
 import java.io.*;

 public class EmployeeDemo
 {
 public static void main (String [] args) throws IOException
 {
  HeapSort mySort = new HeapSort(10);
  Employee [] myArray = new Employee[10];

  String firstFile = ("Employee.txt");
  FileReader file = new FileReader(firstFile); 
  BufferedReader br = new BufferedReader(file);

  String secondFile = ("SortedEmployee.txt");
  PrintWriter outputFile = new PrintWriter(secondFile);

  String[] currArray = new String[10];
  String lineData;
  while ((lineData = br.readLine()) != null)
  {    
     for (int i = 0; i < currArray.length; i++)
     {
        lineData = br.readLine();
        currArray[i] = String.valueOf(lineData);
        mySort.heapSort();
        outputFile.println(mySort);
     }
  }
  outputFile.close();
  System.out.print("Done");
  }
  }

＆＃13;

将文本放在带有背景图像的flexbox项目内

1 个答案: