Question

我试图弄清楚如何将这两个元素相互浮动。 “square”元素和“wrapper”元素，同时让“wrapper”元素填充父元素的其余宽度而不给它固定，因为我不知道它将具有多少宽度。问题还在于，方形元素的动态宽度取决于其中的文本..

我有一个简单的html结构，如下所示：

<div class="row clearfix">
  <div class="square">15103</div>
  <div class="wrapper">
    <div class="info">This is the info.</div>
    <div class="text">This is the text. Some very looong long text. It is not yet long but it will be long in about 20 seconds if we just keep going like this and let time fly by.</div>
  </div>
</div>

然后是一些css：

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.row {
  background: red;
}
.square {
  float: left;
  height: 20px;
  background: gray;
}
.wrapper {
  float: left;
  background: blue;
}
.info {
  background: yellow;
}
.text {
  background: pink;
}

以下是jsfiddle的代码： https://jsfiddle.net/1uoq9oej/3/

我怎样才能做到这一点？

Answer 1

请您用以下内容更改您的CSS： -

.clearfix:before,
.clearfix:after {
    content: "";
}
.clearfix:after {
    clear: both;
}
.row {
  background: red;
  display: inline-flex;
}
.square {
  float: left;
  background: gray;
  display:inline-block;
}
.wrapper {
  float: left;
  background: blue;
  display:inline-block;
}
.info {
  background: yellow;
}
.text {
  background: pink;
}

它解决了你的问题。

Answer 2

您可以从float:left;移除.wrapper并添加margin-left: 20px - 这会使.wrapper变得灵活：

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.row {
  background: red;
}
.square {
  float: left;
  height: 20px;
  width: 20px;
  background: gray;
}
.wrapper {
  margin-left: 20px;
  background: blue;
}
.info {
  background: yellow;
}
.text {
  background: pink;
}

<div class="row clearfix">
  <div class="square"></div>
  <div class="wrapper">
    <div class="info">This is the info.</div>
    <div class="text">This is the text. Some very looong long text. It is not yet long but it will be long in about 20 seconds if we just keep going like this and let time fly by.</div>
  </div>
</div>

你也可以使用更现代的flexbox：

.row {
  background: red;
  display: flex;
}
.square {
  height: 20px;
  width: 20px;
  background: gray;
}
.wrapper {
  background: blue;
}
.info {
  background: yellow;
}
.text {
  background: pink;
}

<div class="row clearfix">
  <div class="square"></div>
  <div class="wrapper">
    <div class="info">This is the info.</div>
    <div class="text">This is the text. Some very looong long text. It is not yet long but it will be long in about 20 seconds if we just keep going like this and let time fly by.</div>
  </div>
</div>

如果您想使用floats并且.square的宽度不固定，那么您应该将overflow: hidden;添加到.wrapper，它会浮动.square但将保持父母的宽度：

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.row {
  background: red;
}
.square {
  float: left;
  height: 20px;
  width: 30%;
  background: gray;
}
.wrapper {
  overflow:hidden;
  background: blue;
}
.info {
  background: yellow;
}
.text {
  background: pink;
}

<div class="row clearfix">
  <div class="square"></div>
  <div class="wrapper">
    <div class="info">This is the info.</div>
    <div class="text">This is the text. Some very looong long text. It is not yet long but it will be long in about 20 seconds if we just keep going like this and let time fly by.</div>
  </div>
</div>

Answer 3

在你的小提琴中试试这个css代码。应该解决这个问题。

.row {
  background: red;
}
.square {
  height: 20px;
  background: gray;
}
.wrapper {
  background: blue;
}
.info {
  background: yellow;
}
.text {
  background: pink;
}

.wrapper,
.square {
  display: table-cell;
}

.clearfix {
  display: table;
}

如何让div元素在另一个浮动之后向左浮动，同时仍然填充父级宽度的其余部分？

3 个答案: