Question

我有一个float: right元素，当浏览器的宽度变窄时，它会在元素下面包裹。我希望左边的元素开始包装它的文本，以便两个元素保持在同一行。

要重现此问题，请查看下面的jsfiddle示例。在缩小输出窗口宽度时，您将在框下方看到购买金额。

https://jsfiddle.net/noyabronok/Luqj9xyv/

我首选纯css解决方案。

Answer 1

既然你已经在使用flexbox了......为什么不在整个过程中使用它？

#main {
  max-width: 369px;
  border-style: solid;
}
h4 {
  box-sizing: border-box;
  font-size: 15px;
  line-height: 16.5px;
  padding-bottom: 10px;
}
.primary {
  display: flex;
  justify-content: space-between;
}
#myicon {
  padding: 0 15px 0 15px;
  min-width: 12px;
  background: green;
}
ul {
  display: flex;
  line-height: 22.8px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
}
li {
  line-height: 22.8px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
.pull-right {} .primary {
  box-sizing: border-box;
  line-height: 22.8px;
  font-size: 16px;
}
#units {
  display: flex;
  font-size: 11px;
  line-height: 15.7px margin-bottom: 5px;
  margin-left: 22px;
}

<div id="main">
  <h4>Pay with</h4>
  <div class="primary">
    <ul>
      <li><span id="myicon">&nbsp;</span>
      </li>
      <li class="second">Bow Wow Stuff
        <br>You are now a part of our team!!</li>
    </ul>
    <div class="pull-right">£24.89
      <br>
      <label id="units">GBP</label>
    </div>
  </div>
</div>

Answer 2

这是一个不使用flex的解决方案：

https://jsfiddle.net/Luqj9xyv/15/

在没有实际使用表格的情况下模仿表格。我用HTML做了一些改变，以摆脱我认为没必要的world = 0 how = 1 are = 2 you = 3 def print_hello_world(): global hello,world,how,are,you hello = "hello" world = "world," how = "how" are = "are" you = "you ?" print(hello,world,how,are,you) print_hello_world()。

Answer 3

注意到你已经在使用弹性盒......

HTML

<div id="main">
    <h4>Pay with</h4>
    <div class="primary">
        <span id="myicon">&nbsp;</span>
        <div class="second"> Bow Wow Stuff<br> You are now a part of our team!!
        </div>
        <div>
          £24.89<br>
          <label id="units">GBP</label>
        </div>
    </div>
</div>

CSS

#main {
  max-width: 369px;
  border-style: solid;
}
h4 {
  box-sizing: boder-box;
  font-size: 15px;
  line-height: 16.5px;
  padding-bottom: 10px;
}

#myicon {
  padding: 0 15px 0 15px;
  min-width: 12px;
  background: green;
}

.primary {
  display:flex;
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px;
}

.second {
  margin-right: 10px;
}

#units {
  font-size: 11px;
  margin-bottom: 5px;
  margin-left: 22px;
}

防止浮动包装而不指定宽度

3 个答案: