Question

我想要以下内容：

======
=img1=  Text
======

======
=img2=  Some more Text
======

当前HTML：

<div id="divison-id">
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Text</p>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Some more text</p>
</div>

当我添加以下CSS规则时：

#division-id p {
    display: in-line
}

我明白了：

======      ======
=img1= Text =img2= Some more Text
======      ======

为什么会发生这种情况以及解决这个问题的正确方法是什么？

Answer 1

如果您可以稍微更改一下HTML，请尝试将<p>和<img />包含在另一个<div>内或类似的内容中：

＆＃13;

#divison-id p {
  display: inline;
}

＆＃13;

<div id="divison-id">
  <div>
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Text</p>
  </div>
  <div>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Some more text</p>
  </div>
</div>

＆＃13;

请注意，有两个错误：

没有display: in-line。
选择器错误。

Answer 2

#division-id p:after
{
    content: '';
    display: block;
    clear: both;
}

Answer 3

试试这个：

Add <br> tag after each <p> tag. Like this:


<div id="divison-id">
 <a href="[href]"><img src="images/img1.png"</a>
 <p>Text goes right</p><br/>
 <a href="[href]"><img src="images/img2.png"</a>
 <p>Some more text</p><br/>
</div>

CSS：

#divison-id p{ display:inline; vertical-align:top}

Answer 4

试试这个

我添加了<div class='item'>来包装每个图片和文字

<div id="division-id">
    <div class='item'>
        <a href="[href]">
            <img src="images/img1.png">
        </a>
        <p>Text</p>
    </div>
    <div class='item'>
        <a href="[href]">
            <img src="images/img2.png">
        </a>
        <p>Some more text</p>
    </div>
</div>

<style>
    #division-id p {
        display: inline
    }
</style>

希望有所帮助

Answer 5

我更喜欢使用lis而不是div和brs，因为你不需要设置任何额外的样式。

ul {
  list-style: none;
  margin: 0;
}

ul li a {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

<ul id="division-id">
  <li>
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Text</p>
  </li>
  <li>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Some more text</p>
  </li>
</ul>

Answer 6

你可以试试这个。我个人建议你不要使用float：left cuz它会限制你的造型在高度和宽度方面。

<style type="text/css">
.division_id div, .division_id>div>p{
    display:inline-block;
}
.division_id>div>a{
    vertical-align:middle;
}
</style>
<html>
<div class="division_id">
    <div>
        <a href="[href]"><img src="images/img1.png"></a>
        <p>Text</p>
    </div>
    <div>
        <a href="[href]"><img src="images/img2.png"></a>
        <p>Some more text</p>
    </div>
</div>
</html>

如何在图像右侧显示这些文本元素？

6 个答案: