Question

我在一个图像板中有2个线程堆叠在一起，每个线程都有一些文本和一个图像文件。

我希望图片始终位于主题的右侧，而不是位于回复按钮之上。

当我通过浮动将图像浮动到右边时：右; 图像保持堆叠在彼此之上，形成分支结构

如何强制使用后图像类的图像不破坏后续线程的<div>结构并保持在屏幕右侧？

<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>&nbsp;<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>&nbsp;<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>

当我添加CSS

时

.post-image
{
  float: right;
}

它打破了一切。

jsfiddle before

js fiddle after floating post-image to the right

Answer 1

这是因为float左或右。 clear因此控制浮动行为，理想的方法是使容器内的所有浮动属性通常为div。有时，浏览器呈现的方式不同，所以无论何时来到新的容器或兄弟，理想的方式是clear float（如果您不需要浮动属性）。在您的代码中，您可能

添加此内容：

.clear{
  clear:both;
 }

更好地理解。也不要忘记玩它，把它理想地放在需要的地方。

Answer 2

如果您可以使用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>

Answer 3

再添加一个div，其中“clear：both”样式将解决您的问题。

<div class="file">
   your code here...
  <div style="clear:both"></div>
</div>

jsfiddle

CSS漂浮正确的怪异行为

3 个答案: