Question

我在这里遇到问题，解决方案无法使用flexbox ，因为这有移动/浏览器问题（尽管这是我最初的做法）。我希望内容在转到下一行时不会分解。如果在运行此代码时缩小浏览器窗口，我希望它：

1）文本旁边的图标

2）如果没有足够的空间，有些容器（黄色/红色）要到下一行

使用溢出或white-space: nowrap似乎没有这样做。我在这里做些蠢事吗？对不起，我已经习惯使用flexbox了！

.nci {
  width: auto;
  height: 100%;
  max-height: 30px;
  display: block;
  float: left;
  padding-right: 5px;
}

.ncw-2 {
  font-size: 85%;
  width: 100%;
  height: auto;
  background: #ddf3ff !important;
  padding: 10px 0;
  margin-bottom: 10px;
  width: 100%;
  float: left;
}

.ncw-2>div {
  width: 23%;
  background: yellow !important;
  float: left;
  white-space: nowrap;
}

.ncw-2>div:last-of-type {
  background: red !important;
  width: 31%;
}

.ncw-2>div>span {
  display: block;
  float: left;
  color: #3acaff;
  font-weight: bold;
  padding-top: 7px;
}

<div class="ncw-2">
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Phone" class="nci"></a>
    <span>93849 294827</span>
  </div>
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Facebook" class="nci"></a>
    <span>somerandomtext</span>
  </div>
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Twitter" class="nci"></a>
    <span>@someraodnotext</span>
  </div>
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Email" class="nci"></a>
    <span>some@randometextewtw.com</span>
  </div>
</div>

Answer 1

我已经对你的CSS进行了一些更改，对于小屏幕，使用媒体查询将项目的宽度设置为50%。

Stack Snippet

.nci {
  width: 30px;
  height: auto;
  display: block;
}

.ncw-2 {
  font-size: 85%;
  width: 100%;
  height: auto;
  background: #ddf3ff !important;
  padding: 10px 0;
  margin-bottom: 10px;
  width: 100%;
  float: left;
}

.ncw-2>div {
  width: 25%;
  background: yellow !important;
  float: left;
}

.ncw-2>div:last-of-type {
  background: red !important;
}

.ncw-2>div>span {
  display: block;
  color: #3acaff;
  font-weight: bold;
  padding-top: 7px;
  float: left;
  width: calc(100% - 35px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ncw-2>div>a {
  display: block;
  float: left;
  width: 35px;
}

@media (max-width:768px) {
  .ncw-2>div {
    width: 50%;
  }
}

<div class="ncw-2">
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Phone" class="nci"></a>
    <span>93849 294827</span>
  </div>
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Facebook" class="nci"></a>
    <span>somerandomtext</span>
  </div>
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Twitter" class="nci"></a>
    <span>@someraodnotext</span>
  </div>
  <div>
    <a href="#"><img src="https://image.flaticon.com/icons/svg/124/124010.svg" alt="Email" class="nci"></a>
    <span>some@randometextewtw.com</span>
  </div>
</div>

Answer 2

您需要先从float:left删除.ncw-2>div>span，以便容器上的white-space:nowrap可以正常工作。

然后，使用媒体查询来包装布局，例如

@media (max-width: 768px) {
  .ncw-2>div:nth-child(n) {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .ncw-2>div:nth-child(n) {
    width: 100%;
  }
}

:nth-child(n)仅用于覆盖之前的:last-of-type。

<强> codepen

进入下一行时防止内容崩溃

2 个答案: