Как отобразить динамически созданный DIV рядом с другим?

Question

Я создаю страницу, которая будет динамически отображать файлы журнала на странице по мере их создания. Вот мой передний конец:

   <div id="container"> 
       <asp:UpdatePanel UpdateMode="Conditional" runat="server"  ID="ServerUpdates"> 
        <Triggers> 
         <asp:AsyncPostBackTrigger ControlID="Timer" /> 
        </Triggers> 
       </asp:UpdatePanel> 
      </div> 
     </div> 

Вот мой CSS:

#container { 
width:100%; 
display: inline-block; 
height:100%; 
} 

.textboxStatus 
{ 
/*background-image:url('http://placehold.it/15/15');*/ 
background-repeat:no-repeat; 
/* background-position:3px 3px;*/ 
border:solid 1px black; 
padding:20px; 
width:600px; 
height:500px; 
float:left; 
clear:left; 
/*position:relative;*/ 
} 
/*.textbox input 
{ 
border:none; 
background:transparent; 
width:100%;  
outline: none; 
}*/ 
.textboxURL 
{ 
/*background-image:url('http://placehold.it/15/15');*/ 
background-repeat:no-repeat; 
/* background-position:3px 3px;*/ 
border:solid 1px black; 
padding:20px; 
width:575px; 
height:475px; 
float:right; 
/*clear: right; 
position:relative;*/ 
display:inline; 
} 

Вот мой код позади:

 protected void CreateDiv(object sender, EventArgs e) 
    { 
     string path = @"\\server\d$\websites\Updates\Product\Production\Logs"; 
     //int rowCount = 0; 

     DirectoryInfo dir = new DirectoryInfo(path); 
     List<FileInfo> FileList = dir.GetFiles().ToList(); 
     ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("<asp:GridView runat='server' ID='Grid' AutoGenerateColumns='false'>")); 
     ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("<Columns>")); 

     foreach (FileInfo file in FileList) 
     { 

      StreamReader sr = new StreamReader(new FileStream(file.FullName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite)); 

      // string[] findStatus = System.IO.Directory.Exists(path, "codepush.log.*", System.IO.SearchOption.TopDirectoryOnly); 
      // string[] findURL = System.IO.Directory.GetFiles(path, "sql.output.log.*", System.IO.SearchOption.TopDirectoryOnly); 
      bool findStatus = (file.Name.Contains("codepush.log.")) ? true : false;//File.Exists(Path.Combine(path, ".txt")); 
      bool findURL = (file.Name.Contains("sql.output.")) ? true : false; 

      if (findStatus == true) 
      { 
       //ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(String.Format("<br /><div class=\"statusLog\"><asp:TextBox runat=\"server\" id=\"tbStatus{0}\"/> </div><div class=\"urlLog\"></div>", count))); 
       //(TextBox)ServerUpdates.ContentTemplateContainer.FindControl("tbStatus" + count.ToString()); 
       ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(string.Format("<asp:BoundField Datafield={0} /><div class='textboxStatus'>", rowCount))); 
       TextBox txt = new TextBox(); 
       txt.TextMode = TextBoxMode.MultiLine; 
       txt.Wrap = false; 
       txt.Width = 600; 
       txt.Height = 500; 

       while (!sr.EndOfStream) 
        txt.Text = txt.Text + sr.ReadLine() + "\r\n"; 
       //Panel txt = new Panel(); 
       //txt.ScrollBars = ScrollBars.Vertical; 
       //txt.Wrap = true; 
       ServerUpdates.ContentTemplateContainer.Controls.Add(txt); 
       ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</div>")); 
       ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</Columns>")); 
      } 

      if (findURL == true) 
      { 
       //ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(String.Format("<br /><div class=\"statusLog\"><asp:TextBox runat=\"server\" id=\"tbStatus{0}\"/> </div><div class=\"urlLog\"></div>", count))); 
       //(TextBox)ServerUpdates.ContentTemplateContainer.FindControl("tbStatus" + count.ToString()); 
       ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("<Columns>")); 
       ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(string.Format("<asp:BoundField Datafield={0} /><div class='textboxURL'>", rowCount))); 
       TextBox txt = new TextBox(); 
       txt.TextMode = TextBoxMode.MultiLine; 
       txt.Wrap = false; 
       txt.Width = 575; 
       txt.Height = 475; 

       while (!sr.EndOfStream) 
        txt.Text = txt.Text + sr.ReadLine() + "\r\n"; 
       //Panel txt = new Panel(); 
       //txt.ScrollBars = ScrollBars.Vertical; 
       //txt.Wrap = true; 
       ServerUpdates.ContentTemplateContainer.Controls.Add(txt); 
       ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</div>")); 
       ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</Columns>")); 
      } 
      //rowCount++; 
     } 
     ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</asp:GridView>")); 
    } 

Моя проблема заключается в том, что он не отображает DIV URL следующего к первому статусу div и четвертому. URL-адрес div отображается последним.

Мне нужно это, чтобы отобразить URL-адрес div рядом с разделом состояния для каждого div (файла).

Я пытался GridView, поэтому любые предложения были бы полезными.

Answer 1

Я не уверен, я понимаю проблему, но ваш вопрос «не отображает URL DIV рядом с первым Status DIV и так четвёртую В URL DIV отображается последняя,.» Я рекомендую следующее:

<div class="row"> 
    <div class="textboxStatus"> 
    </div> 
    <div class="textboxURL"> 
    </div> 
</div> 

Применить float: left; к обоим textboxStatus и textboxURL. Я понимаю, это динамически генерируется, но вместо этого, почему бы AJAX не получить контент, а затем просто заполнить его?

Вы можете легко использовать AJAX с WebForms так:

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Answer 2

Вы должны генерировать <TABLE> с одной линией <TR> и несколько столбцов <td> вместо создания элемента управления Asp.net Gridview буквальным управления.

Не забудьте написать HTML-теги при использовании литералов управления

Пример окончательного HTML:

<Table> 
<tr> 
<td>First div inside</td> 
<td>Second div inside</td> 
... 
</tr> 
</Table> 

Answer 3

В вашем «.textboxStatus» CSS-класс, который вы определили „поплавок: левый“ и одновременно очищая поплавок с помощью «clear: left».

Удалить оба атрибута, а в «.textboxURL» заменить «float: right» на «float: left», и все должно быть хорошо.

Answer 4

Сначала мы определим основной DIV или тело, в котором другие будут содержаться для этого Div стиль будет

#maindiv{ 
      width: 100%; 
      font-size: 12px; 
      overflow: hidden; 
      background: #ccc 
    } 

в вашем случае это будет «контейнер»

теперь, когда вы добавление дивы как

тогда первый стиль DIV будет

  #leftdiv { 
       float: left; 
       width: 33%; 
       background-color: #bbb; 
      } 

аф тер, которые устанавливают ширину каждого DIV и поставить ширину в стиле того д

#nextdiv { 
      float: left; 
       background-color: #eee; 
      width: 33%; 
     } 

и так далее ..