Html 你有什么奇怪的行为
我在一个imageboard中有两个线程,每个线程都有一些文本和一个图像文件 我希望图像总是在线程的右侧,而不是在回复按钮的顶部 当我通过浮动将图像向右浮动时:右相反,图像保持堆叠,形成树枝状结构 如何强制使用post image类的图像不破坏以下线程的Html 你有什么奇怪的行为,html,css,Html,Css,我在一个imageboard中有两个线程,每个线程都有一些文本和一个图像文件 我希望图像总是在线程的右侧,而不是在回复按钮的顶部 当我通过浮动将图像向右浮动时:右相反,图像保持堆叠,形成树枝状结构 如何强制使用post image类的图像不破坏以下线程的结构并保持在屏幕右侧 <div class="you" id="thread_27" data-board="b" align="Right"> <div class="files"> <div clas
结构并保持在屏幕右侧
<div class="you" id="thread_27" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: <a href="/b/src/1454704253855.jpg">1454704253855.jpg</a> <span class="unimportant">(78.69 KB, 1024x768, <span class="postfilename">soft-color-background.jpg</span>)</span>
</p>
<a href="/b/src/1454704253855.jpg" target="_blank"><img class="post-image" src="/b/thumb/1454704253855.png" style="width: 255px; height: 192px; max-width: 98%;" alt=""></a>
</div>
</div>
<div class="post op" id="op_27">
<p class="intro">
<input class="delete" name="delete_27" id="delete_27" type="checkbox">
<label for="delete_27"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:30:54Z">02/05/16 (Fri) 22:30:54</time>
</label> <a class="post_no" id="post_no_27" onclick="highlightReply(27)" href="/b/res/27.html#27">No.</a><a class="post_no" onclick="citeReply(27)" href="/b/res/27.html#q27">27</a><a href="/b/res/27.html">[Reply]</a></p>
<div class="body">xxxxxx2</div>
</div>
<br class="clear">
<hr>
</div>
<div class="you" id="thread_26" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: <a href="/b/src/1454704190918.jpg">1454704190918.jpg</a> <span class="unimportant">(157.33 KB, 1024x768, <span class="postfilename" title="mac-style-presentation-background.jpg">mac-style-presentation-bac….jpg</span>)</span>
</p>
<a href="/b/src/1454704190918.jpg" target="_blank"><img class="post-image" src="/b/thumb/1454704190918.png" style="width: 255px; height: 192px; max-width: 98%;" alt=""></a>
</div>
</div>
<div class="post op" id="op_26">
<p class="intro">
<input class="delete" name="delete_26" id="delete_26" type="checkbox">
<label for="delete_26"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:29:51Z">02/05/16 (Fri) 22:29:51</time>
</label> <a class="post_no" id="post_no_26" onclick="highlightReply(26)" href="/b/res/26.html#26">No.</a><a class="post_no" onclick="citeReply(26)" href="/b/res/26.html#q26">26</a><a href="/b/res/26.html">[Reply]</a></p>
<div class="body">xxxxx</div>
</div>
<br class="clear">
<hr>
</div>
它破坏了一切
这是因为
浮动
向左或向右<代码>清除控制浮点行为,因此,理想的方法是使容器内的所有浮点属性通常为div。有时,浏览器会以不同的方式呈现它,因此每当遇到新容器或同级时,理想的方法是清除浮点(如果不需要浮点属性)。
在您的代码中,您可能
添加以下内容:
为了更好地理解。也不要忘记使用它,将其理想地放置在需要的位置。如果您可以使用flexbox(无法使用旧浏览器),请尝试以下操作:
.row{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.col1{
position: relative;
flex: 1 1 100%;
align-self: stretch;
overflow: hidden;
}
.col2{
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 45px;
align-self: stretch;
}
在html结构上,如
<div class="row">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
再添加一个带有“clear:All”样式的div将解决您的问题
<div class="file">
your code here...
<div style="clear:both"></div>
</div>
你的代码在这里。。。
如果这不能完全解决您的问题,请检查边距和线条高度。之后应该用clear进行修复,但有时会在一些较旧的浏览器中中断。
。您{clear:right}
<div class="row">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
<div class="file">
your code here...
<div style="clear:both"></div>
</div>