如何防止内容超出其容器

-2

我正在为我的博客开发WordPress响应主题。这是主题的结构。所有内容都在div“post”中。如何防止内容超出其容器

如何使所有的div元素“后”采取一切宽度它的容器。像图片，文字等元素显示正常，但来自YouTube视频，推文和脸书的嵌入代码看起来在移动浏览器中被裁剪。当前的CSS代码：

.container{ 
 
\t display: flex; 
 
} 
 
.content-area{ 
 
\t margin: 10px; 
 
\t flex: 3; 
 
\t order: 1; 
 
\t border-radius: 3px; 
 
} 
 
.sidebar{ 
 
\t margin: 10px; 
 
\t flex: 1; 
 
\t order: 2; 
 
} 
 
.post{ 
 
\t background-color: #fbfbfb; 
 
\t padding: 10px; 
 
\t border-radius: 3px; 
 
} 
 
.post img{ 
 
    \t width: 100%; 
 
}

来源

2016-11-17 Vipin Yadav

如果这就是主题，那就需要完成一些事情。 @移动视图的媒体查询，例如，您可以使用后期元素的所有屏幕宽度，而不是使用边距，合并框和侧边栏。此外，你的意思是“看上去裁剪” - 你添加元素并将它们设为宽度100％宽度，并且应该这样做（不要设置高度，只有宽度，高度将根据需要伸展/缩小）。 – junkfoodjunkie

目前还不清楚你在问什么。 YouTube嵌入和Twitter和Facebook小部件都是非常不同的东西。它可能与你的主题无关。 – isherwood

这听起来像你嵌入元素时，你提到的Facebook，Twitter和YouTube。如果是这样，像下面这样一个简单的规则可以解决你的问题：

iframe { max-width: 100%!important; }

来源

2016-11-17 14:14:42 MateBoy

在一个不清楚的问题中投掷'！重要'风格是令人沮丧的维护体验的秘诀。 – isherwood

谢谢。！重要的是诀窍。 –

您应该添加的风格为您块“后”里的每个元素。对于图片我认为没关系。

.post img{ 
 
    width: 100%; 
 
} 
 

 
.post iframe { 
 
    width: 100%; 
 
} 
 

 
.post .other { 
 
    width: 100%; 
 
}

如果你想要的东西，你需要使用媒体查询，为最重要的设备适应更漂亮。

来源

2016-11-17 14:20:59 brahimfes

如何防止内容超出其容器

回答

相关问题