Question

我有一张小图片，我必须在该图片旁边显示一些文字。因为我使用了以下的html和css。

<div class="main">
   <img alt="image"/>
   <h2>this is heading text. This is heading text. This is heading text</h2>
</div>


.main{
    border:1px solid black;
    height:200px;
    width:400px;
    padding:20px;
}
h2{
    display:inline;
}

显示如下

enter image description here

第二行是在图像下方包裹。我必须在第一行下方的第二行，而不是在图像下方。

我也试过使用浮动。但没有工作。请帮忙。

我创建了一个小提琴，因此您可以轻松编辑它：http://jsfiddle.net/codingsolver/MtqHh/1/

Answer 1

希望它会帮助你

   .main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
  }
   h2{
      display: flex;
    }
   img{
    float:left;
  margin-right:10px;
  }

工作演示http://jsfiddle.net/MtqHh/13/

Answer 2

您可以简单地浮动图像，然后用左边距推动h2。

http://jsfiddle.net/MtqHh/8/

img { float: left; }

h2{ margin: 0 0 0 50px; }

Answer 3

.main{
        border:1px solid black;
        height:200px;
        width:400px;
        padding:20px;
        display: inline-flex;
    }
.main img{
    float: left;
    width: 50px;
    height: 50px;
}

h2{
    float:left; 
    margin-left: 50px;
    text-align: left;
    display: inline-block;
    padding;0px;
    margin:0px;
    }

使用此代码对您有用。并看到此链接http://jsfiddle.net/bipin_kumar/MtqHh/10/

Answer 4

实现这一目标的一个好方法是在更新的小提琴上显示：

http://jsfiddle.net/y5ewr/1/

在overflow:hidden上使用<h2>时突出了这一优势。这意味着如果<img>没有到位，标题将流动全宽，并且标题元素上不需要边距。

文字包装下面的图像

4 个答案: