我的下面的代码给了我一个问题，图像出现在文本之后
我的下面的代码给了我一个问题，图像出现在我尝试改变第一个的文本后，但如果我将div.innerhtml放在最后，我加载页面时没有图像。 正如你在上传的图像中看到的那样，Img被设置为文本的结尾我也想知道有没有办法可以缩小尺寸？
public partial class UserProfileWall : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string theUserId = Session["UserID"].ToString(); PopulateWallPosts(theUserId); } private void PopulateWallPosts(string userId) { using (OdbcConnection cn = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver}; Server=localhost; Database=gymwebsite2; User=****; Password=****;")) { cn.Open(); using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn)) { using (OdbcDataReader reader = cmd.ExecuteReader()) { var divHtml = new System.Text.StringBuilder(); while (reader.Read()) { System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); div.ID = "test"; div.InnerHtml = String.Format("{0}", reader.GetString(0)); Image img = new Image(); img.ImageUrl = "~/https://stackoverflow.com/questions/5408436/my-code-below-gives-me-a-problem-the-image-comes-after-the-text/userdata/2/uploadedimage/batman-for-facebook.jpg"; img.AlternateText = "Test image"; div.Controls.Add(img); test1.Controls.Add(div); } } } } } protected void Button1_Click(object sender, EventArgs e) { string theUserId = Session["UserID"].ToString(); using (OdbcConnection cn = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver}; Server=; Database=; User=; Password=;")) { cn.Open(); using (OdbcCommand cmd = new OdbcCommand("INSERT INTO WallPosting (UserID, Wallpostings) VALUES (" + theUserId + ", '" + TextBox1.Text + "')", cn)) { cmd.ExecuteNonQuery(); } } PopulateWallPosts(theUserId); } } 
我试图实现这一点:(从油漆作物） 
忽略web ui部分！
div#test1 { } #test> img { float: left; height: 100px; /* You shouldn't resize images here. Should be done in C#*/ } #test > div { width:90%; z-index:1; padding:27.5px; border-top: thin solid #736F6E; border-bottom: thin solid #736F6E; color:#ffffff; margin:0 auto; white-space: pre; white-space: pre-wrap; white-space: pre-line; }
试过这个没有成功？
来自萤火虫的片段：
weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
以编程方式注入div的任何特定原因？ 有数据绑定控件来完成你正在做的工作。 例如，使用Repeater（2.0+）或ListView（3.5+）控件。 ListView控件
这有点复杂，看看是否有帮助：
System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); div.Style["float"] = "left"; Image img = new Image(); img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg"; img.AlternateText = "Test image"; div.Controls.Add(img); test1.Controls.Add(div); System.Web.UI.HtmlControls.HtmlGenericControl div1 = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); div1.InnerText = String.Format("{0}", reader.GetString(0)); div1.Style["float"] = "left"; test1.Controls.Add(div1); System.Web.UI.HtmlControls.HtmlGenericControl div2 = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); div2.Style["clear"] = "both"; test1.Controls.Add(div2);
当然使用css可以减少上面的几行。
- 为了爱上帝，不要把你的密码放在你的post里。
- 不要纯粹通过字符串连接执行查询！ 使用参数化查询 。 如果我能够将数据写入会话，例如使用UserId，我可以轻松地将SQL注入其中。 请考虑使用ORM工具，如NHibernate或Microsoft的Entity Framework。
- 如果您希望图像位于左侧，并且旁边有文本，请使用此链接中的代码（已更新）。 基本上在图像上你想要设置
float属性。
如果您想更改代码，可以将其更改为：
System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); HtmlGenericControl literal = new HtmlGenericControl("div"); literal.InnerHtml = reader.GetString(0); Image img = new Image(); img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg"; img.AlternateText = "Test image"; div.Controls.Add(img); div.Controls.Add(literal); test1.Controls.Add(div);
图像和文本是内联元素，意味着它们从左向右流动。
如果要将图像强制为新行，请使用以下命令：
div.InnerHtml = String.Format("{0}
", reader.GetString(0));
对于图像大小，您需要上传正确大小的图像，或者在上载时可以使用C＃中的Image对象resize。
为什么不添加一些CSS来将图像浮动到左边？
#test img { float: left; padding: 5px 10px 5px 0; }
试试这个，将ASP：占位符控件添加到页面而不是div。 然后在构造后面的代码中，三个div用于图像，一个用于文本，一个用于包含它们。
//create container System.Web.UI.HtmlControls.HtmlGenericControl container = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); //create div to hold the image System.Web.UI.HtmlControls.HtmlGenericControl imgDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); imgDiv.Attributes.Add("class","imgDiv"); //build the image and set properties. Image img = new Image(); img.Width = new Unit(60);//pixels img.Height = new Unit(60); img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg"; img.AlternateText = "Test image"; //add image to image div imgDiv.Controls.Add(img); //create div to hold text System.Web.UI.HtmlControls.HtmlGenericControl postText = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); postText.Attributes.Add("class", "postText"); postText.InnerHtml = String.Format("{0}", reader.GetString(0)); //now add the two divs to the page test1.Controls.Add(imgDiv); test1.Controls.Add(postText);
现在这应该用HTML呈现：
//image //text
然后你可以使用css浮动图像旁边的文本。
.imgDiv{float:left;} .postText{float:left;}
如果窗口变小，文本可能会跳转到新行。 你可以通过设置容器div的最小宽度来解决这个问题。