Question

我试图为我的网站制作一个关于我们的页面，但似乎我不能让这些图片并排。顺便说一下，我看过其他帖子，但我真的不明白。

.Button {
  background-color: Plum;
  border: 1px solid;
  border-color: black;
  padding: 10px 25px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  font-family: hacked;
  border-radius: 8px;
  text-color: black;
  text-shadow: 2px 2px grey;
}

.sub {
  position: relative;
}

.itmHolder {
  position: relative;
}

.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
  position: absolute;
  top: 0;
}

.og {
  margin-top: 50px;
  position: center;
  text-align: center;
}

h1 {
  font-size: 400%;
  color: Plum;
  text-shadow: 4px 4px Black;
}

pre {
  font-size: 100%;
  color: Plum;
  text-shadow: 2px 2px Black;
}

body {
  background-image: url("lightning.gif");
  background-repeat: no-repeat;
  -webkit-transform: rotateX(0);
  background-size: cover;
  background-position: center center;
  min-height: 100vh;
}

a:link,
a:visited {
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.img-with-text {
  text-align: justify;
  width: [400px];
}

.img-with-text img {
  display: block;
  margin: 0 auto;
}

pret {
  font-size: 200%;
  color: Plum;
  text-shadow: 2px 2px Black;
}

<body background="background.jpg">
  <form action="selve websiten.html">

    <div class="og">
      <div class="itmHolder">

        <div class="sub">
          <button type="button" class="Button"><a href="selve_websiten.html">Frontpage</a></button>
          <button type="button" class="Button"><a href="buynow.html">Buy now</a></button>
        </div>

        <font size=6>
          <pre style="font-family:kenyan coffee;">
 Hello, our names is William and Emal.
 We've made this website for our own interest and trying to make a future for us.
 We are 14 and 15 years of age and, we both live in southern Denmark. 
 On this website we will mostly be selling steam items, games and etc.
 But in the future its possible we are going to be selling other stuff like clothing, cups and etc.</pre>
        </font>
        <div class="img-with-text">
          <img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
          <center>
            <pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p>
          </center>
        </div>

        <div class="img-with-text">
          <img src="william.jpg" alt="William" style="width:400px;height:400px;" />
          <center>
            <pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p>
          </center>
        </div>
</body>

Answer 1

我们试试看：

.container_img {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

和

<div class="container_img">
    <div class="img-with-text">
        <img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
        <center><pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p></center>
    </div>

    <div class="img-with-text">
        <img src="william.jpg" alt="William" style="width:400px;height:400px;" />
        <center><pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p></center>
    </div>
</div>

Answer 2

您的意思是<img src="emal.png">和<img src="william.jpg">并排？

尝试将它们放入内联块元素

<div>
  <span class="imgWrapper"><img src="emal.png"></span>
  <span class="imgWrapper"><img src="william.jpg"></span>
</div>
<style>
  .imgWrapper{
       display:inline-block;
       width:///;
       height:///;
   }
   .imgWrapper img{
        width:100%;
   }
</style>

我不能让照片并排

2 个答案: