Question

早上好，我正在尝试在一个CSS框中对齐三个图像。我的目标是将徽标和按钮放在右侧（顶部和底部），在左侧放置两张图片，但它们彼此重叠。另外，我之所以不能将它们全部编译为一个图像，是因为我计划使用引导程序使此简介页面具有响应性。位置和对齐之类的CSS似乎无法使其正常工作，任何帮助将不胜感激。

div.intro_box {
    width: 1000px;
    height: 650px;
    border: 8px;
    border-style: solid;
    border-color: #00008B;
    background-color: #9e9e9e;
    padding: 25px;
    margin: auto;
    position:relative;
}

.intro_box img {
    position: absolute;
}

.adjust_center {
    text-align: center;
}

<html>
    <head>
        <title>Pokemon TCG Western Visayas PH</title>
        <link rel="stylesheet" href="intro_page.css">
    </head>

    <body>

        <div class="intro_box">

            <div>
                <img src="images/l_tcg.png" alt="Empoleon"/>
            </div>

            <div>
                <img src="images/button_enter.png" alt="Empoleon"/>
            </div>

            <div id="pkmn">
                <img src="images/p_empoleon.png" alt="Empoleon"/>
                <img src="images/p_gardevoir.png" alt="Gardevoir"/>
            </div>

        </div>
    </body>

</html>

] 2

Answer 1

使用CSS网格。有关更多详细信息，我通常查看this page。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  min-height: 300px;
}

.leftTop {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: red;
}

.leftBottom {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: green;
}

.right {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background: purple;
}

<div class="grid">
  <div class="leftTop">
  </div>
  <div class="leftBottom">
  </div>
  <div class="right">
  </div>
</div>

Answer 2

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

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

有关引导网格的更多信息，请查看Bootstrap Documentation (grid systems)

<html>

<head>
  <title>Pokemon TCG Western Visayas PH</title>
  <link rel="stylesheet" href="intro_page.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />
</head>

<body>
  <div class="container">

    <div class="row">
      <div class="col-md-6 text-center">
        <div class="row">
          <div class="col-md-12">
            <!-- Logo Image -->
            <img src="http://via.placeholder.com/350x150" alt="Empoleon" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <!-- Button Image -->
            <img src="http://via.placeholder.com/350x150" alt="Empoleon" />
          </div>
        </div>
      </div>
      <div class="col-md-6 text-center">
        <div class="row">
          <div class="col-md-6">
            <!-- Main Image 1 -->
            <img src="http://via.placeholder.com/150x350" alt="Empoleon" />
          </div>
          <div class="col-md-6">
            <!-- Main Image 2 -->
            <img src="http://via.placeholder.com/150x350" alt="Gardevoir" />
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>

Answer 3

您说位置和对齐不起作用，但是您的示例并未显示使用它们的尝试。您应该能够根据需要设置显示元素的样式并按需要放置它们（对于按钮和徽标是自己划分的，请在“ div”元素上进行操作，如此处的示例，而不是在“ img”上'）。

注意1：我缩小了容器“ div”，使示例在此处可以在StackOverflow中显示。

注意2：我的示例只是将元素分散到您要显示的位置，没有考虑它们的大小，因此它们可能仍然重叠。您将需要使用尺寸，并使用条件样式来使您的设计正确响应窗口尺寸的更改（并在台式机和移动设备上均可使用）。

div.intro_box {
    width: 500px;
    height: 325px;
    border: 8px;
    border-style: solid;
    border-color: #00008B;
    background-color: #9e9e9e;
    padding: 25px;
    margin: auto;
    position:relative;
}

.adjust_center {
    text-align: center;
}

#pkmn { position: absolute ; left: 0 ; top : 0 ; }
#button { position: absolute; right: 0 ; top : 0 ; }
#logo { position: absolute; right: 0 ; bottom: 0 ; }

/* you will need additional styles either here or inline to place
  the two images within the #pkmn div element, I'm not adding this here */
}

<html>
    <head>
        <title>Pokemon TCG Western Visayas PH</title>
        <link rel="stylesheet" href="intro_page.css">
    </head>

    <body>

        <div class="intro_box">

            <div id="logo">
                <img src="images/l_tcg.png" alt="Logo"/>
            </div>

            <div id="button">
                <img src="images/button_enter.png" alt="Button"/>
            </div>

            <div id="pkmn">
                <img src="images/p_empoleon.png" alt="Empoleon"/>
                <img src="images/p_gardevoir.png" alt="Gardevoir"/>
            </div>

        </div>
    </body>

</html>

Answer 4

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>

HTML在CSS框中调整四个图像

4 个答案: