- 15, May 2024
- #1
Привет,
У меня есть макет кладки, на котором размещено несколько элементов div, называемых «сыщиками». Макет работает нормально, когда все сообщения собираются из MySQL, но возникает проблема с добавлением сообщения в реальном времени.
Добавление публикации в jquery и чистом JavaScript приводит к тому, что страница становится менее широкой.
Кажется, это происходит со всем документом или телом, поскольку навигационная панель также сокращается.
navbar также является первым элементом div в теле, поэтому я думаю, что это происходит с документом, но не знаю, почему.
Вот и пример макета
почтовая обертка
Код (разметка): пример поста
Код (разметка): немного CSS.
Код (разметка):
У меня есть макет кладки, на котором размещено несколько элементов div, называемых «сыщиками». Макет работает нормально, когда все сообщения собираются из MySQL, но возникает проблема с добавлением сообщения в реальном времени.
Добавление публикации в jquery и чистом JavaScript приводит к тому, что страница становится менее широкой.
Кажется, это происходит со всем документом или телом, поскольку навигационная панель также сокращается.
navbar также является первым элементом div в теле, поэтому я думаю, что это происходит с документом, но не знаю, почему.
Вот и пример макета
почтовая обертка
.sleuth-post-date{
margin-top:0.2em;
margin-top:0.2em;
}
#sleuthchannel{
clear:both;
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
.sleuth-box{
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: white;
border:1px solid #CCC;
}
.sleuth-box-padding{
padding:0.4em;
}
.sleuth-box textarea{
width:100%;
}
.comment{
margin-top:0.5em;
}
.image-column{
width:25px;
float:left;
margin-right:0.2em;
}
.image-column img{
margin-top:0.4em;
}
.charcount{
padding:2px;
background-color:lightred;
display:block-inline;
}
.load-more{
text-align:center;
padding:2px;
display:block;
width:100%;
}
.load-more:hover{
text-align:center;
padding:2px;
background-color:#2882d6;
color:white !important;
display:block;
width:100%;
cursor:pointer;
cursor:hand;
}
.load-more a:hover{
color:white !important;
}
.load-more-link{
display:block;
height:100%;
width:100%; border:solid 1px #EEE;
}
.comment{
margin-bottom:0.5em;
}
.comment-button{
float:right;
margin-bottom:0.5em; background:#89B6DF; border:none; color:#FFF;
}
.comments-count{
margin-left:0.5em;
}
Код (разметка): пример поста
<div class="sleuth-box"> <div class="sleuth-box-padding"> <iframe width="258" height="192" src="[URL='https://lumtu.com/yti/ewNNweDBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkLzR3Wnl0V0Zt0V0']https://www.youtube.com/embed/4wZytWFm7x0[/URL]" frameborder="0" allowfullscreen></iframe> <span class="block sm-margin-bottom" style="float:left;"><i class="fa fa-pencil"></i> Edit</span> <span style="float:right;"><i class="fa fa-trash"></i> Delete</span> <span class="block sleuth-text sm-margin-bottom clear-fix"><small>By <a>JeremyBenson11</a></small></span> <span><i class="fa fa-heart"></i> </span> <span class="heart-count sm-margin-right">200</span> <span><i class="fa fa-comment"></i> </span> <span>200</span> <div class="comment-box"> <div class="comment clear-fix" style="margin-top:0.5em;"> <div class="image-column" style="width:25px; float:left;margin-right:0.2em;"> <img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" /> </div> <div> <small><a href="#">JeremyBenson11</a> This is my comment. This is my comment. This is my comment. This is my comment. This is my comment. This is my comment.</small> </div> </div> <div class="comment clear-fix" style="margin-top:0.5em;"> <div class="image-column" style="width:25px; float:left;margin-right:0.2em;"> <img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" /> </div> <div> <small><a href="#">JeremyBenson11</a> This is my comment.</small> </div> </div> <div class="comment clear-fix" style="margin-top:0.5em;"> <div class="image-column" style="width:25px; float:left;margin-right:0.2em;"> <img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" /> </div> <div> <small><a href="#">JeremyBenson11</a> This is my comment.</small> </div> </div> <br> </div> <span class="charcount" style="padding:2px; background-color:lightred;">420</span> <textarea style="width:100%;" class="ttx" rows="4"></textarea> <button class="comment-button" type="button">Comment</button> </div> <div class="clear-fix load-more"> <span class="load-more-link">Load More</span> </div> </div><div class="sleuth-box"> Код (разметка): немного CSS.
<div id="contentcontainer" style="width:90%; min-width:90%; max-width:90%; margin:auto;"> <div class="row"> <div class="col-lg-12"> <h3 class="clear-fix">Sleuths</h3> <div id="sleuthchannel"> <!-- posts go here --> </div>Код (разметка):
