Question

我的所有div元素都是在循环中生成的，因此我使用css表来显示它们。我发现了一个显示图像的解决方案，但是当我尝试添加带有背景的文本时，就像在wordpress中的特色帖子一样，整个事情变得扭曲。我试图将文本添加到图像的下半部分。而且，因为它是一个循环，class元素的生成方式类似，所以我试图使用:nth-child()函数来访问它们，但它不需要。

我的HTML

<html><head><link rel="stylesheet" type="text/css" href="core.css"></head>
<body>
<div id="wrapper">
   <div class="specialsticky">
     <img src="Hydrangeas.jpg" alt="first image">
   <div class="mast-screen" style="opacity: 0.5;"></div>
   <div class="mast-screen1">
     <h1 class="mast-header"><a href="#">This the title </a>
     </h1></div>
   <div style="clear:both"></div>
   </div>

  <div class="specialsticky">
    <img src="Chrysanthemum.jpg" alt="second image"> 
  <div class="mast-screen" style="opacity: 0.5;"></div>
  <div class="mast-screen1">
     <h1 class="mast-header"><a href="#">This the title </a>
     </h1></div>
   <div style="clear:both"></div>
   </div>

<div class="specialsticky">
   <img src="Desert.jpg" alt="third image">
   <div class="mast-screen" style="opacity: 0.5;"></div>
   <div class="mast-screen1">
     <h1 class="mast-header"><a href="#">This the title </a>
     </h1></div>
   <div style="clear:both"></div>
   </div>

</div>
</body>
</html>

我的css

#wrapper {
display:table;
width:1024px;
font-size: 0; /* fix inline gap */
margin: 0 auto;
height:450px;}

div.specialsticky:nth-child(1) {
display:table-cell;
border:1px solid #ffffff;
vertical-align:middle;
width:604px;
height:450px;}

div.specialsticky:nth-child(1) img {
width:604px;
height:450px;}

div.specialsticky:nth-child(2) img,div.specialsticky:nth-child(3) img {
width:424px;
height:222px;}

div.specialsticky:nth-child(2),div.specialsticky:nth-child(3){
border:4px solid #ffffff;}


.mast-screen:nth-child(1) {
height: 164px;
width: 599px;
position: absolute;
bottom: 0;
left:0;
background: #000000;}

.mast-screen1:nth-child(1){
height: 164px;
width: 599px;
position: absolute;
bottom: 0;
left: 0;}

.mast-header:nth-child(1){
visibility: visible;
color: #fff;
font-size: 30px;
font-weight: 500;
}

使用CSS表对齐div元素

0 个答案: