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

Question

我正在尝试学习一些HTML，但我不确定我做错了什么。我有3张想要在同一水平线上的图像，如| img 1 | img 2 | img 3 |。我正在使用的外部div容器有足够的空间来容纳所有3个图像。

我尝试过使用inline-block，inline和float，但这些都不起作用。

这是我得到的：

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

Answer 1

您需要将内部div设置为inline-block，而不是外部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文件来定义样式。我使用＆＃34; inline-block＆＃34;在这里作为班级名称，但无论你想要什么名称。

在你的外部css文件中，如果保留我的命名约定，你就会有这个，

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

此外，还有另一个演绎的工作小提琴，三个图像并排。 https://jsfiddle.net/3m33emfd/

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

Answer 2

给出以下css

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

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

您的图像包含在div标记中，这些标记是块元素。您应该直接将样式应用于图像，并取消div，如下所示：

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

Answer 5

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

Answer 6

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

如何在html

6 个答案:

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