小编bri*_*web的帖子

我无法弄清楚如何使以下布局工作.我不仅限于纯CSS - 我知道JS将参与其中以使其成为跨浏览器 - 但CSS解决方案将是非常棒的.这是我想要实现的目标:

我尝试了下面的代码,倾斜容器,然后向相反方向倾斜图像,但它只给了我一个方形图像.Chrome检查员向我显示容器正在倾斜,但是向后倾斜图像会使其再次变为正方形.添加溢出:隐藏到容器类的工作,但角度的边缘变得锯齿状.这是我尝试过的:

http://codepen.io/anon/pen/ubrFz

请帮忙!:)

我试图让文字沿着一个角度包裹.这说明了我想要做的比我能描述的更好:

http://bdub.ca/angle.png http://bdub.ca/angle.png

我在这里找到了一个解决方案,但它使用了很多空的浮动div来创建效果.我需要在页面上多次这样做,所以最好有一个重量更轻的解决方案.JavaScript是可以的,如果它是我可以在页面加载运行的东西,以避免DOM从额外元素的重载.

我为JS解决方案集思广益,试图弄清楚如何在跨度中包裹每条线并将跨距的左边距设置得更大.需要说明的是,该文本是一个段落会自动换行以适合容器 - 可惜我不能让我的客户插入来自WordPress的换行符 - 所以来包装一个跨度的每一行会涉及莫名其妙检测自动换行使用javascript.

有什么建议？

作为设计的一部分,我有一个广泛使用CSS偏斜的网站.除了iPad之外,使用背面可见性解决了锯齿状边缘问题.在所有其他webkit浏览器中,包括iphone,边缘是平滑的,但由于某种原因iPad没有表现.这是偏斜的代码:

-webkit-backface-visibility: hidden;
-ms-backface-visibility:     hidden;
-moz-backface-visibility:    hidden;
backface-visibility:         hidden;
overflow:                    hidden;

-webkit-transform: skewX(16deg);
-moz-transform:    skewX(16deg);
-ms-transform:     skewX(16deg);
transform:         skewX(16deg);

/* IE8+ */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.28674538575880865, M21=0, M22=1, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.28674538575880865, M21=0, M22=1, SizingMethod='auto expand');

这是网站:acumen.org

我在页面上有一个基本的照片布局(用于投资组合).有两种不同尺寸的图像砖,较大的图像砖与较小且正好是宽度和高度的两倍成比例,并且块或窗口之间没有边距.只有几个较大的块与几十个较小的块混合在一起.它是一个响应式设计,因此当窗口大小下降到某个宽度以下时,全尺寸网站上的列数为5%,列数为33.333%,所有列都在100%最大宽度容器内.在每块砖内,图像设置为100%宽度和CSS自动高度.我已经包含了一个线框来说明我所描述的内容.

我遇到的问题是让同位素响应流体布局.如果我在比最大宽度宽的窗口中加载页面,它会完全按预期放置块.但是,当我将浏览器窗口缩小到最大宽度以下时,块会开始变得非常不稳定,在某些变体中:堆叠在一列中; 堆叠在两列中,空列之间; 图像之间的差距; 在大图像下留下一个空行.

我可能不是很好地解释自己,但只是想知道是否有人使用具有流畅布局的Isotope并且可能有一些洞察力.