HTML调整CSS框中的四个图像_Html_Css

HTML调整CSS框中的四个图像

html css

HTML调整CSS框中的四个图像,html,css,Html,Css,你好，我正在尝试在一个css框中对齐三个图像。我的目标是将徽标和按钮放在右侧（顶部和底部），将两张图片放在左侧，但它们相互重叠。另外，我不会把所有的图片都编译成一个图片的原因是我计划使用引导程序使这个介绍页面响应。诸如position和align之类的CSS似乎并不能使它工作，任何帮助都将不胜感激 div.intro\u框{ 宽度：1000px；高度：650px；边界：8px；边框样式：实心；边框颜色：#00008B；背景色：#9e9e9e；填充：25px；保证金：自动；位置：

你好，我正在尝试在一个css框中对齐三个图像。我的目标是将徽标和按钮放在右侧（顶部和底部），将两张图片放在左侧，但它们相互重叠。另外，我不会把所有的图片都编译成一个图片的原因是我计划使用引导程序使这个介绍页面响应。诸如position和align之类的CSS似乎并不能使它工作，任何帮助都将不胜感激

div.intro\u框{
宽度：1000px；
高度：650px；
边界：8px；
边框样式：实心；
边框颜色：#00008B；
背景色：#9e9e9e；
填充：25px；
保证金：自动；
位置：相对位置；
}
.介绍盒img{
位置：绝对位置；
}
.调整中心{
文本对齐：居中；
}


口袋妖怪TCG西维萨亚斯博士

使用css网格。要了解更多细节，我通常会查看

.grid{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
宽度：100%；
最小高度：300px；
}
.左上角{
网格柱：1/2；
网格行：1/2；
背景：红色；
}
.左下角{
网格柱：1/2；
网格行：2/3；
背景：绿色；
}
.对{
网格柱：2/3；
网格行：1/3；
背景：紫色；
}

如果您使用引导网格（因为您说过您已经将引导用于响应性设计）。你可以这样做。最好以全屏模式查看代码段

需要调整填充和列宽，以使其完全按照您想要的方式显示，并使其在移动设备上看起来更好，但这为其提供了基本结构

有关引导网格的更多信息，请查看


口袋妖怪TCG西维萨亚斯博士

您说位置和对齐不起作用，但您的示例没有显示使用它们的尝试。您应该能够根据位置设置显示元素的样式，并按照自己的意愿放置它们（对于按钮和徽标，如果按钮和徽标位于各自的分区中，请在“div”元素上进行设置，如本例所示，而不是在“img”上）

注1：我减少了容器“div”，使示例可以在StackOverflow中显示

注2：我的示例只是将元素分散到您希望它们位于的位置，它没有考虑它们的大小，因此它们可能仍然重叠。您将需要调整大小并使用条件样式，以使您的设计正确响应窗口大小的更改（并在桌面和移动设备上工作）

div.intro\u框{
宽度：500px；
高度：325px；
边界：8px；
边框样式：实心；
边框颜色：#00008B；
背景色：#9e9e9e；
填充：25px；
保证金：自动；
位置：相对位置；
}
.调整中心{
文本对齐：居中；
}
#pkmn{位置：绝对；左：0；顶：0；}
#按钮{位置：绝对；右侧：0；顶部：0；}
#徽标{位置：绝对；右侧：0；底部：0；}
/*您需要在此处或内联放置其他样式
在#pkmn div元素中的两个图像，我不在这里添加它*/
}


口袋妖怪TCG西维萨亚斯博士

您可以在没有网格系统的情况下实现这一点。。
身体{
边际：0px；
填充：0px；
}
.包装纸{
边框：2倍纯绿；
宽度：99%；
高度：500px；
位置：相对位置；
显示器：flex；
}
.wrapper.leftWrapper{
宽度：50%；
显示：内联块；
}
.wrapper.leftWrapper.img1{
位置：相对位置；
顶部：20px；
}
.wrapper.leftWrapper.img1 img{
宽度：60%；
}
.wrapper.leftWrapper.img2{
位置：绝对位置；
顶部：50px；
左：30px；
}
.wrapper.leftWrapper.img2 img{
宽度：40%；
}
.wrapper.rightWrapper{
宽度：20%；
显示：内联块；
}
.wrapper.rightWrapper.logo{
位置：绝对位置；
排名：0；
右：0；
文本对齐：右对齐；
}
.wrapper.rightWrapper.logo a img{
宽度：20%；
高度：50px；
边框：1px实心#000；
}
.wrapper.rightWrapper.btn{
位置：绝对位置；
底部：0；
右：0；
文本对齐：右对齐；
}
.wrapper.rightWrapper.btn a img{
宽度：20%；
最小宽度：100px；
高度：100px；
边框：1px实心#000；
}

您是否考虑过使用引导网格系统？设置每个网格的宽度和位置属性（左/右、上/下）

You can achieve this without grid system..

<!doctype html>
<html lang="en">
<head>
  <style>
  body{
    margin:0px;
    padding:0px;
  }

  .wrapper{
    border:2px solid green;
    width:99%;
    height:500px;
    position:relative;
    display:flex;
  }

   .wrapper .leftWrapper{
        width:50%;
        display:inline-block;
  }

  .wrapper .leftWrapper .img1{
    position:relative;
    top:20px;
  }
   .wrapper .leftWrapper .img1 img{
        width:60%;
   }

  .wrapper .leftWrapper .img2{
    position:absolute;
    top:50px;
    left:30px;
  }

  .wrapper .leftWrapper .img2 img{
    width:40%;
   }


  .wrapper .rightWrapper{
        width:20%;
        display:inline-block;
  }

  .wrapper .rightWrapper .logo{
    position:absolute;
    top:0;
    right:0;
    text-align:right;
  }

  .wrapper .rightWrapper .logo a img{
    width:20%;
    height:50px;
    border:1px solid #000;
  }

   .wrapper .rightWrapper .btn{
    position:absolute;
    bottom:0;
    right:0;
    text-align:right;
  }
   .wrapper .rightWrapper .btn a img{
        width:20%;
        min-width:100px;
        height:100px;
        border:1px solid #000;
  }

  </style>
</head>

<body>

    <div class="wrapper">
        <div class="leftWrapper">
            <div class="img1"><img src="images/abstract.jpg" title="img1" alt="img1"/></div>
            <div class="img2"><img src="images/ball.png" title="img2" alt="img2"/></div>
        </div>

        <div class="rightWrapper">
            <div class="logo">
                <a href="#"><img src="images/defaultlogo.jpg" title="logo" alt="logo"/></a>
            </div>

            <div class="btn">
                <a href="#"><img src="images/btn.jpg" title="btn" alt="btn"/></a>
            </div>
        </div>
    </div>

</body>
</html>