当其中一个内容长的时候，不能在一行中获得div

Question

我在一行中有两个div，左右浮动。当其中一个获得长内容时，它会溢出另一个内容。我希望它尊重第二个div，当它没有足够的空间时得到几行，当第一个div达到更大的高度时，让我的第二个div垂直居中。

.item {
  background: white;
  width: 91%;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
}

.content-container {
  float: left;
  background: yellow;
}

.buttons {
  float: right;
  background: green;
}

<div class="item">
  <div class="content-container">
    <p>Buy groceries</p>
  </div>
  <div class="buttons">
    <button class="btn-done">
      <i class="fa fa-check" aria-hidden="true"></i>
    </button>
    <button class="btn-delete">
      <i class="fa fa-trash" aria-hidden="true"></i>
    </button>
  </div>
</div>

Answer 1

您可以为文本容器设置最大宽度。确保在p标签中使用break字。

   .content-container {
      float: left;
      background: yellow;
      max-width: calc(100% - 80px);
    }

.content-container p{
  word-wrap: break-word;
}

＆＃13;

＆＃13;

.item {
  background: white;
  width: 91%;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
}

.content-container {
  float: left;
  background: yellow;
  max-width: calc(100% - 80px);
}

.content-container p{
  word-wrap: break-word;
}


.buttons {
  float: right;
  background: green;
}

＆＃13;

<div class="item">
  <div class="content-container">
    <p>Buy groceries1111111111111111111111111111111111111111111111111111111111111111111111111</p>
  </div>
  <div class="buttons">
    <button class="btn-done">
            <i class="fa fa-check" aria-hidden="true"></i>
          </button>
    <button class="btn-delete">
            <i class="fa fa-trash" aria-hidden="true"></i>
          </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

为了垂直对齐按钮，您可以使用flex显示，因为您使用的是float。添加了一个新代码段。这些变化如下。

.item{
  display: flex;
  align-items: center;
}

.buttons {
  float: right;
  margin-left: auto;
  background: green;
}

＆＃13;

＆＃13;

.item {
  background: white;
  width: 91%;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
  display: flex;
  align-items: center;
}

.content-container {
  float: left;
  background: yellow;
  max-width: calc(100% - 80px);
}

.content-container p {
  word-wrap: break-word;
}

.buttons {
  float: right;
  margin-left: auto;
  background: green;
}

＆＃13;

<div class="item">
  <div class="content-container">
    <p>Buy groceries1111111111111111111111111111111111111111111111111111111111111111111111111</p>
  </div>
  <div class="buttons">
    <button class="btn-done">
            <i class="fa fa-check" aria-hidden="true"></i>
          </button>
    <button class="btn-delete">
            <i class="fa fa-trash" aria-hidden="true"></i>
          </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用 flexbox

例如，将第一个弹性项目宽度设置为=(N2/PLVlast) ，将第二个 flex项目设置为90%。为第二个弹性项目设置 min 宽度（两个按钮的宽度），这样按钮就不会堆叠。

实施例

＆＃13;

＆＃13;

10%

＆＃13;

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.item {
  background: white;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
}

.item>div:nth-child(1) {
  background: yellow;
  width: 90%;
}

.item>div:nth-child(2) {
  background: yellow;
  min-width: 40px;
  padding-left: 5px;
  width: 10%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

＆＃13;

＆＃13;

＆＃13;

<强>提示

How to vertically align text inside a flexbox?

Answer 3

.item{
  display: flex;
  justify-content: space-between;
 background: white;
 width: 91%;
 margin: 10px auto 0;
 padding: 14px;
 border-radius: 5px; 
 box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
 font-size: 14px;
  color: #424242;
  overflow: auto;
}

.content-container{
  background: yellow;
}

.buttons{
  background: green;
}

<div class="item">
        <div class="content-container">
          <p>Buy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceries</p>
        </div>
        <div class="buttons">
          <button class="btn-done">
            <i class="fa fa-check" aria-hidden="true"></i>
          </button>
          <button class="btn-delete">
            <i class="fa fa-trash" aria-hidden="true"></i>
          </button>
        </div>
      </div>