Fatal编程技术网

Javascript 图像在Css中的位置

javascript css image

Javascript 图像在Css中的位置,javascript,css,image,Javascript,Css,Image,当我显示图像时，它将位于div的最左侧位置 我知道这不是一个好问题，但是我无法解决这个问题 实际上，我正在动态添加html标记。我添加了一个有2个锚和3个图像，其中2个是可见的，一个是可见的。当你点击这两张图片中的任何一张时，第三张图片就会出现。但在单击图像时，它会显示第三个图像，但位于div的最左侧 但是我把这张照片放在了这两张照片的旁边 我想在这两张图片旁边展示这张图片 如何做到这一点 你可以在这里看到我的问题 我没有使用任何浮子：在任何地方都留下了浮子 请帮忙 我试着用绝对位置搜索，但它

当我显示图像时，它将位于div的最左侧位置

我知道这不是一个好问题，但是我无法解决这个问题

实际上，我正在动态添加html标记。我添加了一个有2个锚和3个图像，其中2个是可见的，一个是可见的。当你点击这两张图片中的任何一张时，第三张图片就会出现。但在单击图像时，它会显示第三个图像，但位于div的最左侧

但是我把这张照片放在了这两张照片的旁边

我想在这两张图片旁边展示这张图片

如何做到这一点

你可以在这里看到我的问题

我没有使用任何浮子：在任何地方都留下了浮子

请帮忙

我试着用绝对位置搜索，但它不起作用

提前谢谢

[编辑]

showData += "<div style='margin:3px;display: inline-block;padding-right:20px;'>";
                        showData += "<a style='text-decoration: none' href=\"" + userProfileURL + "\" title='KLMS User Profile of " + fullName + " ' onmousedown=\"javascript:StoreClickedData(" + userId + ",'" + userInput + "','" + names[i] + "')\" title='" + tooltipTitle + "'> <img src='UserControls/ThumbNail/ThumbnailConverter.ashx?FilePath=" + imageURL + "&height=18&width=18' /> </a> ";
                        showData += "<a href=\"" + gpsUserProfile + "\" onmousedown=\"javascript:StoreClickedData(" + userId + ",'" + userInput + "','" + names[i] + "')\" title='" + tooltipTitle + "'>" + fullName + "</a>";
                        if (isPresent) {
                            showData += " <a href=\"" + emailId + "\" title='Mail To " + fullName + " ' onmousedown=\"javascript:StoreClickedAndLunchQuickFeedBack(" + userId + ",'" + userInput + "','" + names[i] + "','imgQuickfd" + imageId + "')\" class='smallIcon' style=\"background-image:url(Images/email.png);\" >&nbsp;&nbsp;&nbsp;&nbsp;</a>";
                            if (userDetails[userData.Skype_ID] != "null") {
                                showData += " <a href=\"" + skypeId + "\" title='Chat With " + fullName + "' onmousedown=\"javascript:StoreClickedAndLunchQuickFeedBack(" + userId + ",'" + userInput + "','" + names[i] + "','imgQuickfd" + imageId + "')\" class='smallIcon' style=\"background-image:url(" + skypeName + ");\" >&nbsp;&nbsp;&nbsp;&nbsp;</a>";
                            }
                            showData += "<i id='imgQuickfd" + imageId + "' style='display:none; cursor: pointer;position: absolute !important;' title='Quick Feedback To" + fullName + " ' onclick=\"javascript:StoreQuickFeedback('" + userLoginName + "','" + names[i] + "','imgQuickfd" + imageId + "')\" class=\"icon-thumbs-up glowed \"></i>";
                        }
                        showData += "</div>";

showData+=”；
showData+=“”；
showData+=“”；
如果（显示）{
showData+=“”；
if（userDetails[userData.Skype\u ID]！=“null”）{
showData+=“”；
}
showData+=“”；
}
showData+=“”；
[/编辑]

查看来源：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head"><title>
MFS Search Engine
</title><link href="CSS/CustomGoogleSearch.css" rel="stylesheet" /><meta charset="utf-8" /><link href="bootstrap/css/bootstrap.css" rel="stylesheet" /></head>
<body>
<form name="form" method="post" action="CustomGoogleSearch.aspx?query=html5" id="form">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQwMjc4OTQzN2RkRYBvMG1HTB0LNjZv1HE0hZ95t08=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form'];
if (!theForm) {
theForm = document.form;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    theForm.__EVENTTARGET.value = eventTarget;
    theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
}
}
//]]>
</script>


<script src="/klms    /WebResource.axd?d=YGVs8XyAWsEiLGuJ16c33zJSRK4YrDPiOWmkBO0Qq98589H5pLaw70AyFUVa3BleRpWNySSr    ltpIawWYHK6tn8jtCeo1&amp;t=634656060808104849" type="text/javascript"></script>


<script src="/klms/WebResource.axd?d=rGkGTBKKUfifja4ZbpHfden_7XF4hf_qIjcSz4LqV8J7RmM4b5zUIgiT0uuMpRtVNMa-zLKNmfsh-e7Fd8RqdBTlqhM1&amp;t=634656060808104849" type="text/javascript"></script>
<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"     value="/wEWBgLFvND9DQKIiKT4AQK4gogyAvjE9ooCAoLplowDAt3Q4McN/MAodltIcChy5WGQ8XeHsiQlCY8=" />
</div>
        <noscript>
            <div class="jsEnable">
                <a href="https://support.google.com/adsense/bin/answer.py?hl=en&    answer=12654">How To Enable</a>
            <span>JavaScript is needed for this site (which is currently disabled in your browser). Please enable JavaScript.</span>
        </div>
    </noscript>
    <input type="hidden" name="hdnUserId" id="hdnUserId" value="595" />
    <input type="hidden" name="hdnUserName" id="hdnUserName" value="Annapurnap" />
    <input type="hidden" name="hdnRowCount" id="hdnRowCount" value="10" />
    <input type="hidden" name="hdnAPIServerName" id="hdnAPIServerName" value="http://203.129.204.51:8080/collective-intellegenc" />
    <input type="hidden" name="hdnSolrServerName" id="hdnSolrServerName" value="http://203.129.204.51:8080/solr" />


<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('searchInput');//]]>
</script>
</form>
<form id="formResult">
    <div class="span18" id="divContent" style="width: 97%">
        <div style="width: 100%; margin-top: -10px" class="inline">
            <img id="imgGoogleCustomImage" class="googleCustomImage" style="float: right; margin-top: 0.25%" src="http://www.google.com/cse/images/google_custom_search_smwide.gif" />
            <a href="/FeedbackList.aspx" style="float: right; padding-right: 5%;">*Feedback List </a>
        </div>
        <div id="divSearch" class="searchDiv">
            <img src="Images/KLMS.png" id="imgLogo" />

            <div>
                <div id="divTextBox">
                    <input type="search" name="q" size="31" id="searchInput" class="span6" autofocus="autofocus" autocomplete="off" />
                </div>
                <div id="divButton">
                    <input type="button" id="btnSearch" name="sa" class="btn btn-primary span2" value="Search" onclick="Search();" />
                </div>
            </div>
        </div>
        <div id="divResult" style="display: none; padding-top: 5%">
            <div class="divItem" style="float: left; margin-right: 1%; display: none;">
                <fieldset class="well" id="fieldsetItem">
                    <legend class="legend">Content that can help</legend>
                    <div id="searchResultItem">
                    </div>
                    <div id="divLinkPaging"></div>
                </fieldset>
            </div>
            <aside style="float: left; width: 99%">
                <fieldset class="well" id="fieldsetPerson">
                    <legend class="legend">Persons who can help</legend>
                    <div id="searchResultPerson">
                    </div>
                </fieldset>
            </aside>
        </div>
        <div id="divGoogleResult">
        </div>
        <script src="JS/Plugins/jquery-1.8.2.min.js"></script>
        <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="JS/Plugins/paging.js"></script>
        <script src="https://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/Collection.js"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/Solr.js"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/ConnectServer.js"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/UserConnection_UsabilityScore_UserSearch.js"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/FixedSet.js"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/VariableSet.js"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/ShowCollectiveIntelligenceData.js"></script>
        <script type="text/javascript" src="JS/Collective%20Intelligence/StoreSearchQuery.js"></script>
    </div>
</form>


MFS搜索引擎
//
此站点需要JavaScript（当前在浏览器中已禁用）。请启用JavaScript。
//
有帮助的内容
能帮忙的人

从外观上看（虽然在没有看到任何代码的情况下很难判断……提示，提示），我想说容器不够宽，不能容纳三张图像

尝试将宽度增加10像素左右，看看是否有帮助。您可能需要减少其他元素的填充/边距以腾出空间；同样，如果没有看到代码，我也无法确定。

作为替代

document.getElementById(id).style.display = "block";
使用jquery方法

这不会将标记拖到新行。

包含所有这些图像的容器（可能是li）没有足够的宽度，无法在线显示所有图像。尝试增加父容器的宽度请发布一些代码。还有，你尝试过什么？我在UI显示时放置图像。稍后我只是显示图像。如何确定图像的位置？？因此，当我将可见性设置为真时，它将显示在正确的位置。嘿，如果您想让我们更轻松，请转到页面的viewsource并在此处复制和粘贴，负责此行为的容器的确切标记可以修复图像的位置，而不考虑图像的显示是否为none或block。