相关疑难解决方法(0)

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …

我在使用flexbox时遇到了问题,并且想要了解嵌套父元素和子元素的工作方式.

我知道孩子继承了父母的弹性.但如果你需要为孩子(宝宝)抚摸一个孩子,这会被覆盖吗？flexbox的正确用法是什么？

我什么时候都适用display: flex于孩子的孩子(婴儿)的缘故,或将是覆盖孩子的父母柔性？

.parent-container {
  display: flex;
  flex: 1 0 100%;
  background-color:yellow;
}
.child-container {
  flex: 1 1 50%
  background-color: blue;
}
.baby-of-child-container {
  flex: 1 1 50%;
  background-color: green;
}

<div class='parent-container'>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
</div>

我无法弄清楚这一点。我想要 3 张图像并排放置在 930 像素宽的 div 中。

因此，当您进入响应式设计模式时，或明智地拖动屏幕浏览器宽度以使其更小时，所有 3 个图像并排在 div 内，而不会换行到下一行。

但会自动开始重新调整大小以适应重新调整大小的 div。

仅当第三张图像包裹在第二张图像下时，这 3 张图像才开始在 div 内正确调整大小。所以它看起来像下面这样。

[]
[] 
[]

一旦所有图像垂直对齐，图像就会开始正确缩小。但是这张图片包裹在下一张图片下对我来说并不好，因为在手机上查看网站时，或者重新调整屏幕大小时，图像仍然超大。

必须是一种阻止这些图像相互缠绕的方法，并且只是保持内联，但随着 div/页面宽度的缩小而自动重新调整自己的大小？

我试过空白： nowrap; 显示：内联；内联块；偶数显示：表格单元格；似乎没有什么可以做我需要它做的事情。但是，如果我只使用一个图像而不是 2 个或 3 个，那么它就可以正常工作。

您可能在想，为什么不将所有 3 张图像放在 Photoshop 中的 1 张图像中？那么每个 img 都是一个 href 链接，所以这是不可能的。即使将图像全部向左浮动仍然无济于事。

这是我的 CSS/HTML

img {

max-width: 100%;
height: auto;

}

然后

<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png"> <img src="lights.png"> <img src="action.png">
</div>

有人可以告诉我我可能哪里出错了吗？当父容器缩小时，如何停止图像包裹在其他图像下方。

我不得不求助于每个断点使用多个不同预先固定图像大小的@media 查询。但必须有一个更简单的方法。一些很简单的东西，我错过了。