Question

我有以下html / css：

#wrapper {
  width: 400px;
  background-color: red;
}
#text {
  margin-right: 50px;
}
#subcontent {
  float: right;
  width: 50px;
}

<div id="wrapper">
  <div id="subcontent">
    <img src="http://lorempicsum.com/futurama/50/50/1" width="50">
  </div>
  <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
    eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
    Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
    cursus vitae. Vivamus nec faucibus elit.</div>
</div>

这实现了使文本保持向左并且子内容保持正确的期望效果，而不必指定文本的宽度（用于响应行为）。但是，在语义上这是不正确的，因为我必须在<div id="subcontent"/>之前将<div id="text"/>放在html中，即使文本应该出现在子内容之前（假设读取rtl）。我可以忍受这个以完成工作，但不幸的是，当屏幕尺寸非常小时，我需要使<div id="text"/>全宽，然后让子内容自然流动。目前这意味着子内容位于顶部，我需要它位于底部。

如何更改css以便在订购html时

<div id="text"/>
<div id="subcontent"/>

子内容是否会向右浮动，而不会被文本按下？

我需要支持IE9 +

Answer 1

这样的东西？

＆＃13;

#wrapper {
  width: 400px;
  background-color: red;
  position: relative;
}
#text {
  margin-right: 50px;
}
#subcontent {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
}

＆＃13;

<div id="wrapper">
  <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
    eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
    Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
    cursus vitae. Vivamus nec faucibus elit.</div>
  <div id="subcontent">
    <img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
  </div>
</div>

＆＃13;

Answer 2

漂浮是一种痛苦。

尝试将flex和媒体查询用于响应式设计：

注意：，因为你提到rtl阅读，我强烈建议你看一下flex-direction属性（MDN）

＆＃13;

#wrapper {
  display: flex;
  width: 400px;
  background-color: red;
  /* this is the default behavior - you can skip it */
  flex-direction: row;
}
#text {
}
#subcontent {
  width: 50px;
}

@media (max-width: 400px) {
    #wrapper {
      flex-direction: column;
    }
}

＆＃13;

<div id="wrapper">
  <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
    eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
    Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
    cursus vitae. Vivamus nec faucibus elit.</div>
  <div id="subcontent">
    <img src="http://lorempicsum.com/futurama/50/50/1" width="50">
  </div>
</div>

＆＃13;

Answer 3

冷却。如果我正确理解你的问题，你试图改变HTML的顺序，但输出看起来仍然一样吗？

如果是这种情况，您需要#text和#subcontent float:left;添加清算div并在文字上使用calc宽度以确保图像将始终适合，而文本可以响应大小。

这是一个小提琴：https://jsfiddle.net/hk9ntyd2/1/

这是代码：

#wrapper {
  width: 400px;
  background-color: red;
}

#text {
  width: calc(100% - 50px);
  float: left;
}

.clear {
  clear: both;
}

#subcontent {
  float: left;
  width: 50px;
}

<div id="wrapper">

  <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
    eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
    Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
    cursus vitae. Vivamus nec faucibus elit.</div>
  <div id="subcontent">
    <img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
  </div>
  <div class="clear"></div>
</div>

margin-left:50px;解决方案应该运行正常，我个人发现calc解决方案有点整洁，但可以随意使用保证金：）

float：正确的语义

3 个答案: