Question

我有一个简单的问题，我如何在一行中设置图像和文字。像这样[image - text - image]等等

<html>
  <head>
    <title></title>
    <style>
      img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
    <h1>afdsgdf dfgsdf dsfgf</h1>
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
  </body>
</html>

Answer 1

默认情况下，

<img>和<h1>是块元素。所以他们会在自己的行上显示他们的内容。

因此您需要使用display属性。并将其值设置为inline

<html>

<head>
    <title></title>
    <style>
        img {
            display: inline;
            width: 100px;
            height: 100px;
        }
        h1 {
            display: inline;
        }
    </style>
</head>

<body>
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
    <h1>afdsgdf dfgsdf dsfgf</h1>
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</body>

</html>

在这里阅读更多相关信息=＆gt; https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 2

你也可以使用它，但你需要添加div，因为如果使用display：table-cell意味着父类必须使用display：table

 <html>
    <head>
      <title></title>
      <style>
        div { display : table }
        div img { display : table-cell }
        div h1 { display : table-cell }
        img {
          width: 100px;
          height: 100px;
        }
      </style>
    </head>
    <body>
      <div>
        <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
        <h1>afdsgdf dfgsdf dsfgf</h1>
        <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
      </div>
    </body>
 </html>

Answer 3

你可以通过两种方式为image和h1添加类并使用float（但是使用float old方法，如果你使用它，你也想要更好地使用display），另一种方法是使用display：inline-block 例如：

<body>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" class="img">
<h1 class="txt">afdsgdf dfgsdf dsfgf</h1>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" class="img">

的CSS：

img{display:inline-block;vertical-align:middle;}
txt{display:inline-block;vertical-align:middle;}

Answer 4

您可以将display:inline用于单行输出：

img,h1 {display:inline;}

Answer 5

这里有两种可能的解决方案：

1st - Inline Block

只需添加一个带有内联块的类，这样就可以了。

<强> CSS

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

<强> HTML afdsgdf dfgsdf dsfgf

第二名 - 漂浮左侧

您可以将所有项目浮动到同一方向，您将获得几乎相同的结果。浮动的东西是你想在display: table中包含它们，以防止其他项目进入浮动项目下面。

<强> CSS

.pull-left{
  float: left;
}

.row{
  display: table;
}

<强> HTML

<div class="row">
  <img class="pull-left" src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
  <h1 class="pull-left">afdsgdf dfgsdf dsfgf</h1>
  <img class="pull-left" src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</div>

差异

您将在my live example中看到两种解决方案都能达到您想要的效果，但差异在于最后两张图像之间的空间。

Float解决方案删除了图像之间的空间。

两种解决方案都很好，但在你的情况下，我更喜欢第一种，所以我不必添加div class="row"。

希望这有帮助！

Answer 6

使用可以使用列表来执行此操作 HTML

<ul>
    <li><img .....></li>
    <li><h1></h1>
    <li><img .....></li>
</ul>

的CSS

li{display:inline;}

Answer 7

img {
  display: inline;
  width: 100px;
  height: 100px;
}
h1 {
  display: inline;
}

<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
<h1>afdsgdf dfgsdf dsfgf</h1>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">

你需要将img和h1组成一行这样做会影响您的所有图片和h1，因此最好使用class或id来制作inline

Answer 8

<html>
  <head>
    <title></title>
    <style>
      img {
        width: 100px;
        height: 100px;
        z-index=1;
        margin:0px auto;
        position:asolute;
      }
   ul li{
        float:left;
       }
    </style>
  </head>
  <body>
    <ul><li><img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"></li>
    <li><h1>afdsgdf dfgsdf dsfgf</h1></li>
    <li><img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"></li></ul>
  </body>
</html>

如何在同一行中设置两个图像和文本

8 个答案:

1st - Inline Block

第二名 - 漂浮左侧

差异