我不能让图片并排

我试图为我的网站做一个关于我们的页面，但它似乎并不像我可以使图片并排。顺便说一下，我看了其他帖子，但我并不真正了解它。我不能让图片并排

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

来源

2017-06-21 EmalGod

让我们试试：

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

来源

2017-06-21 10:11:17 Arioch

谢谢，但有没有办法有几个象素图片之间的间隔 – EmalGod

将边距从右到左的图片和页边距从左到右添加到右侧图片。用于图片之间的空间。 –

只需在CSS中添加一个边距或填充以满足您的需求。不是在图像上，而是在“img-with-text”类中。 – Arioch

你的意思是<img src="emal.png">和<img src="william.jpg">肩并肩地走？

尝试把它们放到inline-block的元素

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

来源

2017-06-21 10:09:44

我不能让图片并排

回答

相关问题