Html 使用CSS表对齐div元素_Html_Css

Html 使用CSS表对齐div元素

html css

Html 使用CSS表对齐div元素,html,css,Html,Css,我所有的div元素都在一个循环中生成，所以我使用css表来显示它们。我发现一种显示图像的解决方案，但当我尝试向图像添加带有背景的文本时，就像wordpress中的一篇特色文章一样，整个过程都会失真。我尝试将文本添加到图像的下半部分。而且，由于这是一个循环，类元素的生成方式与此类似，因此我尝试使用：nth-child（）函数可访问所有这些文件，但不需要花费时间我的html <html><head><link rel="stylesheet" type="text/

我所有的

div

元素都在一个循环中生成，所以我使用css表来显示它们。我发现
一种显示图像的解决方案，但当我尝试向图像添加带有背景的文本时，就像wordpress中的一篇特色文章一样，整个过程都会失真。我尝试将文本添加到图像的下半部分。而且，由于这是一个循环，

类

元素的生成方式与此类似，因此我尝试使用

：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>

请在这里编辑代码。。如您所见，黑色区域位置不正确，在浏览器中情况变得更糟，图像也变得不成比例。在每个

.specialsticky

的末尾都有额外的

s，因此HTML页面无法正确呈现。我不太确定这是否会造成问题？谢谢你指出这一点，但错误仍然是相同的。有人找到解决方案吗？

#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;
}