我想证明在 <img> 标签中对齐 <p> 标签

Question

当我悬停一个 img 时，我想显示一个段落。 我现在拥有的代码可以做到这一点，但问题是，该段落比 img 更宽。我希望它与 img 的宽度完全相同（但我不想给出宽度 px）这是我的代码，但我从 css 中删除了一些代码行，我留下了重要的代码行（我也不知道为什么 jquery不起作用，因为我在 jquery 和 jsfiddle 方面没有任何经验）

jsFiddle Demo

    <div class="container pt">
        <div class="row mt centered">   
            <h1>Bestuur</h1>
            <div class="col-lg-4">
                <a class="zoom green">
                    <span class="test">
                        <img src="http://i.imgur.com/gXHM44W.jpg" title="source: imgur.com" />
                    </span>
                    <p>"Ik ben Samir Aliyev en ik ben 18 jaar oud.</br> AZJN is altijd mijn passie geweest, door AZJN heb ik heel veel sociale contacten gekregen binnen Nederland met Azerbeidzjaanse jongeren. Ik heb mezelf niet alleen ontwikkeld qua sociaal zijn maar ook op zakelijke manieren. Zo hebben we bijvoorbeeld heel veel brieven geschreven naar formele instanties, evenementen georganiseerd die voor goede doelen waren en buitenlanders kennis laten maken met Azerbeidzjan. Meestal ben ik bezig met multimedia van AZJN, dus tijdens evenementen zie je me meestal met een Foto-apparaat lopen of een Camera. Ik zit al vanaf het begin in het AZJN-team en ik ben ook niet van plan om eruit te stappen! "</p>
                    <p>test</p>
            </div>
    </div>
</div>

Answer 1

你为什么不想使用宽度？你知道你也可以使用width: 100% 如果您不想使用固定宽度，则在您的 css 中或类似。您似乎也忘记了正确关闭一些标签。如果你能以某种方式管理我会尝试用 CSS 来做这件事，因为这确实是一个如何在屏幕上安排东西的问题（--> CSS）。所以尝试width: 100% 或将<p> 放在图像标签内（见下文）并使用相对定位（position: relative; left: ??px/em/% right: ??px/em/% top: ... bottom: ...）进行定位

肯定是关闭标签如下所示：

<div class="container pt">
        <div class="row mt centered">   
        <h1>Bestuur</h1>
            <div class="col-lg-4">
                <a class="zoom green"></a><img src="http://i.imgur.com/gXHM44W.jpg" title="source: imgur.com" class="test">

<p>"Ik ben Samir Aliyev en ik ben 18 jaar oud.</br> AZJN is altijd mijn passie geweest, door AZJN heb ik heel veel sociale contacten gekregen binnen Nederland met Azerbeidzjaanse jongeren. Ik heb mezelf niet alleen ontwikkeld qua sociaal zijn maar ook op zakelijke manieren. Zo hebben we bijvoorbeeld heel veel brieven geschreven naar formele instanties, evenementen georganiseerd die voor goede doelen waren en buitenlanders kennis laten maken met Azerbeidzjan. Meestal ben ik bezig met multimedia van AZJN, dus tijdens evenementen zie je me meestal met een Foto-apparaat lopen of een Camera. Ik zit al vanaf het begin in het AZJN-team en ik ben ook niet van plan om eruit te stappen! "</p></img>

                <p>test</p>
            </div>
    </div>
</div>

希望这会有所帮助！ :)

Answer 2

我编写了一个 javascript 函数，将图像的宽度分配给文本 div。我已将 ID 添加到 img 标记和文本 div（这是一个 <p> 标记）

function showText(divId,imgId) {

	document.getElementById(divId).style.visibility = "visible";
	document.getElementById(divId).style.display = "block";
	document.getElementById(divId).style.width = document.getElementById(imgId).offsetWidth + "px";
}

function hideText(divId) {
	document.getElementById(divId).style.visibility = "hidden";
	document.getElementById(divId).style.display = "none";
}

<div class="container pt">
        <div class="row mt centered">   
        <h1>Bestuur</h1>
            <div class="col-lg-4">
                <a class="zoom green">
                <span class="test"><img src="http://i.imgur.com/gXHM44W.jpg" title="source: imgur.com" onmouseover="showText('theText',this.id)" onmouseout="hideText('theText')" id="theImg"></span>
                <div id="theText" style="visibility:hidden;display:none;">
                "Ik ben Samir Aliyev en ik ben 18 jaar oud.</br> AZJN is altijd mijn passie geweest, door AZJN heb ik heel veel sociale contacten gekregen binnen Nederland met Azerbeidzjaanse jongeren.
                 Ik heb mezelf niet alleen ontwikkeld qua sociaal zijn maar ook op zakelijke manieren. Zo hebben we bijvoorbeeld heel veel brieven geschreven naar formele instanties, evenementen georganiseerd
                  die voor goede doelen waren en buitenlanders kennis laten maken met Azerbeidzjan. Meestal ben ik bezig met multimedia van AZJN, dus tijdens evenementen zie je me meestal met een Foto-apparaat
                   lopen of een Camera. Ik zit al vanaf het begin in het AZJN-team en ik ben ook niet van plan om eruit te stappen! "</div>
                <p>test</p>
            </div>
    </div>
</div>

Answer 3

你可以只使用a元素内联块而不是块：

.zoom {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

演示： https://jsfiddle.net/gpohz45b/3/