Question

我试图利用flexbox--连续三个盒子 - 但会发生什么：

框3中的内容（文本）将box1中的内容推向左侧（图像），以便图像被挤压和缩小。

这个问题可以在我主页顶部的滑块下方看到：http://localnepaltoday.com我左边有五个图像，右边有文字。

显然是：

如果右侧框3中的文字对于所有图像都相同，则图像的宽度也是如此。但如果没有，宽度会随着文字挤压图像而变化。

举例说明：

在图5的底部，只有几个j字母结束于＆＃34;因为＆＃34;意味着第一个句子变得更长，因此图像被挤压。

我可以做些什么来固定或冻结box3的宽度，这样它就不会挤压box1中的图像并使图像变窄？

或者换句话说，如何将图像向左排列？（以其他方式上传它们的尺寸完全相同）。

非常感谢您对此的任何帮助。

这是html：

    http://codepen.io/localnepal/pen/ZBLLjV

CSS：

    twocolumns{display: flex; display:-webkit-flex;}
    .box .entry img {max-width: 200px;} box1 {height: 120px;      
    width:35%;flex-grow:0; flex-shrink:0;} box2 {height: 120px; width: 
    15%;flex-grow:0; flex-shrink:0;} box3 {height: 120px; width: 
    40%;flex-grow:0; flex-shrink:0;}

干杯，汉斯

Answer 1

尝试使用flex: 0 0 200px;代替传统width。这意味着元素将始终为200px ，不会增长且不会缩小

无法修复弹箱盒的宽度

1 个答案: