我试过使用内联块，内联和浮动，但这些不起作用。

这里是我的了：

<div id="banner" style="overflow: hidden; display: inline-block;"> 
     <div class="" style="max-width: 20%; max-height: 20%;"> 
      <img src ="img1.jpg"> 
     </div> 

     <div class="" style="max-width: 100%; max-height: 100%;"> 
      <img src ="img2.jpg"> 
     </div> 

     <div class="" style="max-width: 20%; max-height: 20%;"> 
      <img src ="img3.jpg"> 
     </div> 
    </div>

来源

2016-09-28 Feltie

你检查在Flexbox的？ – EQuimper

最大宽度的总和大于100％，如果将第二个减少到60％，它会起作用吗？ – starturtle

您需要设置里面的div内联块，而不是外部的一个。

<div id="banner"> 
    <div class="inline-block"> 
     <img src ="img1.jpg"> 
    </div> 

    <div class="inline-block"> 
     <img src ="img2.jpg"> 
    </div> 

    <div class="inline-block"> 
     <img src ="img3.jpg"> 
    </div> 
</div>

我删除了所有的内联CSS，因为这只是不好的做法。你应该有一个单独的css文件来定义样式。我在这里使用“inline-block”作为类名，但是可以将其命名为任何你想要的名称。

在你的外部CSS文件中，可以有这样的，如果你一直在我的命名约定，

.inline-block { 
    display: inline-block; 
}

此外，另一继承人移交的工作小提琴，三个图像一边到另一边。 https://jsfiddle.net/3m33emfd/

横幅不需要设置为内嵌块，它是您的子div的外部容器。你实际上希望#banner显示：block，所以我把它放在我的工作小提琴中。

来源

2016-09-28 05:00:11

您有附在div标签内的图像，它们是块元素。你而应直接套用样式的图片，并与申报单做了，是这样的：

<img style="max-width:20%" src="…">

来源

2016-09-28 05:00:36

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<title>Modern Studio </title> 



<style> 
.image { 
display: inline-block; 
} 

</style> 

</head> 

<body> 
    <div id="banner" style="overflow: hidden; display: inline-block;"> 
     <div class="image" style="max-width: 20%; max-height: 20%;"> 
      <img src ="img1.jpg"> 
     </div> 

     <div class="image" style="max-width: 100%; max-height: 100%;"> 
      <img src ="img2.jpg"> 
     </div> 

     <div class="image" style="max-width: 20%; max-height: 20%;"> 
      <img src ="img3.jpg"> 
     </div> 
    </div> 


    </body> 
</html>

来源

2016-09-28 05:00:37

给下面的CSS

display: flex; justify-content:space-around;

<div id="banner" style="overflow: hidden; display: flex; justify-content:space-around;"> 
 
     <div class="" style="max-width: 20%; max-height: 20%;"> 
 
      <img src ="img1.jpg"> 
 
     </div> 
 

 
     <div class="" style="max-width: 100%; max-height: 100%;"> 
 
      <img src ="img2.jpg"> 
 
     </div> 
 

 
     <div class="" style="max-width: 20%; max-height: 20%;"> 
 
      <img src ="img3.jpg"> 
 
     </div> 
 
    </div>

来源

2016-09-28 05:01:16 Gowtham

使用display：inline-block;

<div id="banner" style="overflow: hidden;justify-content:space-around;"> 
    <div class="" style="max-width: 20%;max-height: 20%;display: inline-block;"> 
     <img src="img1.jpg"> 
    </div> 

    <div class="" style="max-width: 100%;max-height: 100%;display: inline-block;"> 
     <img src="img2.jpg"> 
    </div> 

    <div class="" style="max-width: 20%;max-height: 20%;display: inline-block;"> 
     <img src="img3.jpg"> 
    </div> 
    </div>

来源

2016-09-28 05:08:40 GANI

.image-div{ 
 
    float:left; 
 
    margin-right:10px; 
 
    max-width: 20%; 
 
    max-height: 20%; 
 
}

<div id="banner" style="overflow: hidden; "> 
 
    <div class="image-div" > 
 
    <img src ="img1.jpg"> 
 
    </div> 
 

 
    <div class="image-div" > 
 
    <img src ="img2.jpg"> 
 
    </div> 
 

 
    <div class="image-div" > 
 
    <img src ="img3.jpg"> 
 
    </div> 
 
    <div style="clear:left;"></div> 
 
</div>

来源

2016-09-28 05:17:14

如何在html中显示同一行上的图像

回答

横幅不需要设置为内嵌块，它是您的子div的外部容器。你实际上希望#banner显示：block，所以我把它放在我的工作小提琴中。

相关问题