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做这件事，因为这真的是如何在屏幕上安排事情的问题（ - ＆gt; 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>标记）

＆＃13;

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";
}

＆＃13;

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

＆＃13;

Answer 3

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

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

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

我想在<img/>标记</p>中对齐<p>标记

3 个答案: