Fatal编程技术网

Javascript 水平附加图像

javascript css image jsp

Javascript 水平附加图像,javascript,css,image,jsp,Javascript,Css,Image,Jsp,我试图在一行中显示servlet（图像）的输出，但是图像会垂直附加 这是我的jsp代码： <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <%@ taglib prefix=

我试图在一行中显示servlet（图像）的输出，但是图像会垂直附加

这是我的jsp代码：

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
   <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Insert title here</title>
   <link rel="Stylesheet" type="text/css" href="css/smoothTouchScroll.css" />
   <link rel="stylesheet" href="dist/jquery.rondell.css" type="text/css" media="all" title="Screen">
   <script type="text/javascript" src="libs/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="libs/modernizr-2.0.6.min.js">    </script>
  <script type="text/javascript" src="dist/jquery.rondell.js"></script>
 <link rel="Stylesheet" type="text/css" href="css/smoothTouchScroll.css" />
 <link rel="Stylesheet" type="text/css" href="css/style1.css" />
<style type="text/css">
#TouchScroller
{
position:relative;
width:auto;
height:auto;
}
#TouchScroller div.scrollableArea img
{
position: relative;
float: left;
padding: 0;
margin: 0;
width:100%;
height:50%; 
}
    </style> 
   <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
   <script src="js/jquery.kinetic.min.js"></script>
   <script src="js/jquery.smoothTouchScroll.min.js"></script>

  </head>
  <body>
  <div>

 <sql:setDataSource var="webappDataSource"
driver="com.mysql.jdbc.Driver" url="jdbc:mysql://pshrivas-eni.cwgbkmxxzso1.ap-southeast-1.rds.amazonaws.com:3306/eni_support"
user="db_user" password="password123" />

 <sql:query dataSource="${webappDataSource}"
sql="select imgid,count1  from carousel_three" var="result1" />
 <div id="car1" class="carousel">    
 <div id="rondellCarousel" class="hidden">

       <c:forEach var="row" items="${result1.rows}"> 


        <img id="img" src="${pageContext.servletContext.contextPath }/Imagedb?id=${row.imgid}"  /> 



 </c:forEach>  
 </div>
 </div>
 </div>
 <script type="text/javascript">

     $(function() {
// Create a rondell with the 'carousel' preset and set an option
// to disable the rondell while the lightbox is displayed
$("#rondellCarousel").rondell({
  preset: "carousel",

  onAfterShift:function(idx){
     // alert(idx);
      itemLoadCallback: trigger(idx)

  }
});
});
function trigger(idx, state)
{
  //document.getElementById('TouchScroller').innerHTML=" ";
  $.ajax({
      type : "GET",
      url : "Sampleimage1",
      contentType :"application/json",
      data:{id:idx},
      success : function(data) {
            $.each(data,function(index,item){   

                 $.each(item,function(i,obj){
                     var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
                     img.attr('src','data:image/jpg;base64,' +obj.map.key );
                     img.appendTo('.scrollableArea');

              // $('.scrollableArea').append('<img src="data:image/jpg;base64,' +obj.map.key+'" />');

             });
          });
      }
    });


    }
   </script>

<div id ="car2" class="carousel1">

<div id="TouchScroller">
</div>

</div>      
<script>
   $("#TouchScroller").smoothTouchScroll({ 
      continuousScrolling: true
  });
 </script>

 </body>
 </html>


在此处插入标题
#触摸屏
{
位置：相对位置；
宽度：自动；
高度：自动；
}
#TouchScroller分区可滚动区域img
{
位置：相对位置；
浮动：左；
填充：0；
保证金：0；
宽度：100%；
身高：50%；
}
$（函数（）{
//使用“转盘”预设创建rondell并设置选项
//在显示灯箱时禁用rondell
$（“rondellCarousel”）。rondell({
预设：“旋转木马”，
onAfterShift:函数（idx）{
//警报（idx）；
itemLoadCallback:触发器（idx）
}
});
});
函数触发器（idx，状态）
{
//document.getElementById（'TouchScroller'）。innerHTML=“”；
$.ajax({
键入：“获取”，
url:“Sampleimage1”，
contentType:“应用程序/json”，
数据：{id:idx}，
成功：功能（数据）{
$.each（数据、函数（索引、项）{
$。每个（项目、功能（i、obj）{
var img=$（''）；
});
});
}
});
}
$（“#TouchScroll”）.smoothTouchScroll（{
连续滚动：真
});
，但我想显示一行中的所有图像。请帮我做这个

我相信宽度：100%在您的
#touchcroller div.scrollableArea img
上，强制图像占据尽可能多的容器，我将删除此项并查看：

  • 这将允许元素彼此相邻
  • 这将阻止您的元素向下换行到下一行（如果这是您想要的）
确保检查容器的宽度（
.touchcroller
），以确保它是页面的全宽。这通常通过
width:100%完成
使用CSS标签，而不是您现有的标签。显示方向等都由CSS控制。即使我将宽度更改为60%，也只有图像缩小，但显示相同